Question

我已创建此plnkr以显示我尝试过的内容。

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

需要为每条记录绑定每个车辆类别的值。使用Label＆amp ;;每行有两条记录。它将从每个对象的关键vehiclecategory绑定的值。

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

目前硬编码标签值。需要实现以下样本

（1）第一记录：abcd1

（2）第二记录：abcd2

Answer 1

@JohnD答案是正确的，您可以使用ngRepeat在数组中显示该项目，但如果您想添加ordinal numbers，可以查看此帖子“Add st, nd, rd and th (ordinal) suffix to a number”< / p>

Answer 2

案例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：我在label添加了$scope.myArray个属性。正如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）

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

Angular在控制器（js）中创建动态范围＆amp;在视图中绑定（html）

3 个答案: