Angular create dynamic scope in controller(js) and bind in view(html)

Question

我创建了这个plnkr来展示我尝试过的东西。

 $scope.myArray = [{
            "productDetails": {
                "productName": "productname1",
                "qty": 5,
                "pricePerPiece": 20
            },
            "vehiclecategory": "abcd"
        },
        ...
 ]

需要为每条记录绑定每个车辆类别的值。每行有两条带有标签的记录，其值将从每个对象的关键车辆类别绑定。

标签将保持原样，因为它的文本将根据国际化而变化，因此它将是一个常量，将来自每个用户位置的属性文件。每个位置都有单独的常量文件。

当前对标签值进行了硬编码。需要实现以下样本

（1）首条记录：abcd1

（2）第二条记录：abcd2

Answer 1

@JohnD答案是正确的，您可以使用ngRepeat在数组中显示该项目，但如果您想添加ordinal numbers，您可以在这篇文章中查看"将st，nd，rd和th（序数）后缀添加到数字"

Answer 2

1. 案例 1 ）

http://plnkr.co/edit/sA85huMV3nYUJME8tSVx?p=preview

您知道数据中label属性的名称（键）

    <div class="width50" ng-repeat="item in myArray track by $index">
       <label>{{item.label}} - {{$index}}</label> : {{item.vehiclecategory}}
    </div>

Javascript ：我为您的$scope.myArray添加了label属性.正如 JohnD 所解释的那样，您必须使用 ng-repeat 来迭代数组，而不是使用 "$scope.first， $scope.second ..."（想象一下，如果你有 100 个）

$scope.myArray = [{
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd1",
    "label" : "My Data",
}, {
    "productDetails": {
        "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        
    },
    "vehiclecategory": "abcd2",
    "label" : "Your Info",
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd3",
    "label":"adresse"
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd4",
    "label": "street"
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,           "pricePerPiece": 20        },
    "vehiclecategory": "abcd5",
    "label" : "city",
}, {
    "productDetails": {            "productName": "productname1",            "qty": 5,            "pricePerPiece": 20        },
    "vehiclecategory": "abcd6",
    "label":"etc"
}];

---

2. 案例 2 ）

也许label属性的名称并不总是像这样：

    $scope.myArray = [
        {
             "productDetails": {    "productName": "productname1","qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd1",
             "My Data" : "My Data",
        }, {
             "productDetails": {    "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd2",
             "Your Info" : "Your Info",
        }, {
             "productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20 },
             "vehiclecategory": "abcd3",
             "label":"adresse"
        }, {
             "productDetails": { "productName": "productname1", "qty": 5, "pricePerPiece": 20   },
             "vehiclecategory": "abcd4",
             "street": "street"
        }, 
        ...
    ];
    // this array contain all the possible label name  
    var listoflabel = ["etc","adresse","city","street","Your Info","My Data"];
    // search on item if a label key exist and return its value
     $scope.getLabel = function(item){
          for(var l in listoflabel){
            if(item[ listoflabel[l] ]){
              return item[ listoflabel[l] ];
            }
          }
          return "label";
        }

带有函数调用的 HTML

 <div class="width50" ng-repeat="item in myArrayVariable track by $index">
       <label>{{getLabel(item)}}</label> : {{item.vehiclecategory}}
    </div>

Answer 3

我不确定我是否完全理解你的问题，但如果我理解了，你也许可以用ngRepeat解决它。查看以下示例：

<div class="width50" ng-repeat="item in myArray track by $index">
   <label>({{$index}}) {{item.vehiclecategory}}</label> : {{item.productDetails.productName}}
</div>