AngularJS: многомерные массивы $ Scope

Question

Вот сценарий

У меня есть эта разметка, и я хочу, чтобы петля это на основе $ объема массива, который был возвращен в API

<div class="car-group" ng-repeat="p in photos"> 
    <input type="text" name="product_description" id="product_description" class="form-control product_description" ng-model="p.product_description"> 

    <div class="car-photos"> 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="p.photo_label"> 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="p.image_data"> 
    </div> 
</div> 

JSON

$scope.photos = [ 
        [ 
         {"photo_label":"Cover","image_data":"cover.jpg"}, 
         {"product_description":"Car Cover"} 
        ], 

        [ 
         {"photo_label":"Inside","image_data":"inside.jpg"}, 
         {"photo_label":"Rear","image_data":"rear.jpg"}, 
         {"product_description":"Car View"} 
        ] 
       ] 

вот иллюстрация того, что я хочу сделать

Количество фотографий зависит от ответа JSON от сервера.

Answer 1

Вы можете уменьшить JSon объект в этот формат:

[ 
    { 
    "images": [ 
     { 
     "photo_label": "Cover", 
     "image_data": "cover.jpg" 
     } 
    ], 
    "product_description": "Car Cover" 
    }, 
    { 
    "images": [ 
     { 
     "photo_label": "Inside", 
     "image_data": "inside.jpg" 
     }, 
     { 
     "photo_label": "Rear", 
     "image_data": "rear.jpg" 
     } 
    ], 
    "product_description": "Car View" 
    } 
] 

для облегчения связывания данных с разметкой, используя нг-повтор внутри нг-повторить.

Смотреть демо ниже:

angular.module("app", []).controller("ctrl", function($scope) { 
 

 
    $scope.photos = [ 
 
    [{ 
 
     "photo_label": "Cover", 
 
     "image_data": "cover.jpg" 
 
    }, { 
 
     "product_description": "Car Cover" 
 
    }], 
 
    [{ 
 
     "photo_label": "Inside", 
 
     "image_data": "inside.jpg" 
 
    }, { 
 
     "photo_label": "Rear", 
 
     "image_data": "rear.jpg" 
 
    }, { 
 
     "product_description": "Car View" 
 
    }] 
 
    ].reduce(function(p, c) { 
 
    let obj = {}; 
 
    c.forEach(function(e) { 
 
     if (e['product_description']) { 
 
     obj['product_description'] = e['product_description']; 
 
     } else { 
 
     obj['images'] = obj['images'] || []; 
 
     obj['images'].push({ 
 
      "photo_label": e['photo_label'], 
 
      "image_data": e['image_data'] 
 
     }); 
 
     } 
 
    }); 
 
    p.push(obj); 
 
    return p; 
 
    }, []); 
 

 
    // console.log($scope.photos); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 

 
    <div class="car-group" ng-repeat="p in photos"> 
 
    <input type="text" name="product_description" id="product_description" class="form-control product_description" ng-model="p.product_description"> 
 

 
    <div class="car-photos" ng-repeat="img in p.images"> 
 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="img.photo_label"> 
 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="img.image_data"> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

Может выглядеть немного тяжеловесный - но, возможно, что-то вроде этого?

<div class="car-group" ng-repeat="p in photos"> 
    <div ng-repeat="elt in p | filter: myDesc"> 
     <input type="text" name="product_description" id="product_description" class="form-control product_description" ng-model="elt.product_description"> 
    </div> 

    <div ng-repeat="elt in p | filter: myImage"> 
     <div class="car-photos"> 
      <input type="text" name="photo_label" class="form-control photo label" ng-model="elt.photo_label"> 
      <input type="text" name="photo_label" class="form-control photo label" ng-model="elt.image_data"> 
     </div> 
    </div> 

где

$scope.myDesc = function(elt){ 
    if (elt.product_description){ 
     return true; 
    } else{ 
     return; 
    } 
}; 

$scope.myImage = function(elt){ 
    if (elt.photo_label || elt.image_data){ 
     return true; 
    } else{ 
     return; 
    } 
}; 

Answer 3

Прежде всего мы имеем здесь совершенно неправильно структуру данных, я полагаю, что он не может быть изменен, так что я буду показывать решение с преобразованием этой структуры в некоторых более точным. Почему эта структура является неправильной:

• один массив элемента имеет динамический подсчет элементов
• один элементом является массивом объекта с другим типом - и массивом являются структурами, используемыми для хранения элементов одного и того же типа. В настоящее время мы имеем в том же объекте объекта и объекта объекта массива.

Чтобы исправить это, мы должны отделить реквизит продукта из фотографий, мое предложение заключается в преобразовании одного массива элементов объекта:

{ 
"photos": [ 
    { 
    "photo_label": "Inside", 
    "image_data": "inside.jpg" 
    }, 
    { 
    "photo_label": "Rear", 
    "image_data": "rear.jpg" 
    } 
], 
"product_description": "Car View" 
} 

Мы можем думать, что этот объект представляет свойство продукта и фотографии являются одним из их. Я думаю, что и продукты - лучший способ назвать это, потому что фотографии - это просто реквизит продукта.

Хорошо, поэтому я подготовил рабочее решение с функцией преобразования внизу.

var app = angular.module("app",[]); 
 
app.controller("controller", function($scope){ 
 

 
    //server structure 
 
    var products = [ 
 
    [ 
 
     {"photo_label":"Cover","image_data":"cover.jpg"}, 
 
     {"product_description":"Car Cover"} 
 
    ], 
 
    [ 
 
     {"photo_label":"Inside","image_data":"inside.jpg"}, 
 
     {"photo_label":"Rear","image_data":"rear.jpg"}, 
 
     {"product_description":"Car View"} 
 
    ] 
 
    ]; 
 
    
 
    //function coverting structure to better one 
 
    function _convertToProperStructure(arr){ 
 
    
 
    return arr.map(function(el){ 
 
     
 
     var properEl={ 'photos': [] }; 
 
     
 
     //last element is description so without it 
 
     for (var i=0; i< el.length-1; i++){ 
 
     
 
     properEl.photos.push(el[i]);//add photo 
 
     
 
     } 
 
     
 
     //set description 
 
     properEl.product_description = el[el.length-1].product_description; 
 
     
 
     return properEl; 
 
    }); 
 
    
 
    }; 
 
    
 
    //convert to proper structure 
 
    $scope.products=_convertToProperStructure(products); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="controller"> 
 
<div class="car-group" ng-repeat="p in products"> 
 
    <input type="text" name="product_description" id="product_description" class="form-control product_description" ng-model="p.product_description"> 
 

 
    <div class="car-photos" ng-repeat="p in p.photos"> 
 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="p.photo_label"> 
 
     <input type="text" name="photo_label" class="form-control photo label" ng-model="p.image_data"> 
 
    </div> 
 
</div> 
 
</div>

Answer 4

Here I added Demo

Hi 

Я изменил свой объект JSON в этом формате:

$scope.photos = [ 
         {"product_description":"Car Cover", 
         "images": 
         [ 
          {"photo_label":"Cover","image_data":"cover.jpg"} 

         ]}, 


          {"product_description":"Car View", 
         "images": 
          [ 
          {"photo_label":"Inside","image_data":"inside.jpg"}, 
          {"photo_label":"Rear","image_data":"rear.jpg"} 
         ]} 

        ]