Question

这是方案

我有这个标记，我想基于API返回的$ scope数组来循环这个

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

使用 ng-repeat 中的 ng-repeat 在您的标记中轻松实现数据绑定。

见下面的演示：

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

我们可以认为此对象代表产品属性，而照片就是其中之一。我认为产品也是更好的方式，因为照片只是产品道具。

好的，所以我准备了下面有转换功能的工作解决方案。

＆＃13;

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);
  
});

＆＃13;

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

＆＃13;

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

                     ]

AngularJS：多维数组$ scope

4 个答案: