AngularJS：多次元配列$スコープ

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オブジェクトを減らすことができます：NG-繰り返し内NGリピートを使用して、マークアップでを結合簡単にデータの

[ 
    { 
    "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

は少し重い利き見える場合がございます - 多分このような何か？

$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

私たちはここに非常に間違ったデータ構造を持っているまず第一に、私はそれが変更することはできないと仮定し、私はいくつかに、この構造を変換して解決策を表示します

<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> 

より正確な。なぜこのような構造が間違っている：

• 単一要素アレイ要素
• の動的カウントを有する単一の要素は、異なるタイプのオブジェクトの配列 - であり、アレイは、同じタイプの要素を格納するために使用される構造です。現在、私たちは同じ配列の写真オブジェクトと製品プロパティオブジェクトを持っています。

  { 
  "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"} 
         ]} 

        ]