Question

这是我的代码

HTML

<div ng-app ng-controller="MyCtrl">
   <input type="text" ng-model = "data.name" ><br>
   <input type="text" ng-model = "data.value" ><br>
   <input type="text" ng-model = "data.id" ><br>
   <input type="button" value="ADD" ng-click = "addIntoArr(data.name, 
       data.value, data.id)" ng-disabled= !data.name>
   <select ng-model="selectItem"  ng-options="currOption as 'order' + 
     (data.indexOf(currOption)+1) group by currOption.name for currOption
         in data"></select>
   Data : {{selectItem.name}} 
</div>

这是我的Js代码

  function MyCtrl($scope) {
    $scope.data = [{
       name: "AM",
       value: "11",
       id: "2"
    }, {
       name: "PM",
       value: "12",
       id: "3"
    }, {
      name: "PM",
      value: "12",
      id: "23"
    }, {
      name: "PM",
      value: "12",
      id: "33"
    }, {
      name: "AMT",
      value: "13",
      id: "33"
    }, {
      name: "WAT",
      value: "14",
      id: "21"
   }];

  $scope.addIntoArr = function (name, value, id) {
     $scope.data.push({
        name: name,
        value: value,
        id: id
    });
  }
   $scope.selectItem = $scope.data[0];
}

这是我使用标签 AM，PM，AWT，WAT 的数组。每个都有一个订单（Please check fiddle link）。我希望每个标签订单显示的数字如 AM 中的order1，order1，order2， PM 中的order3等等。如果我在数组中添加新条目，那么最近添加的条目应显示在下拉列表中，订单号和相关标签显示在数据中。

Answer 1

您无法在$index内使用ng-options。但是，您可以通过在传递当前选项的数据项上使用indexOf来获取当前索引。

<select 
   ng-model="selectItem" 
   ng-options="currOption as 'order' + (data.indexOf(currOption)+1) group by currOption.name for currOption in data"></select>

演示 http://jsfiddle.net/6cf3h54x/3/

Answer 2

您无法将$index与ng-options一起使用。请改用indexOf。你可以这样做：

<select ng-model="selectItem" ng-options="currOption.id as 'order'+data.indexOf(currOption) group by currOption.name for currOption in data"></select>

Answer 3

我建议您添加一些外部库，例如lodash，并将数据格式化为更方便的结构。然后，您可以使用ng-options而不是用ng-repeat将头撞到墙上。

请考虑以下事项：

// group existing data by object's name using lodash _.groupBy
$scope.groupedData = _.groupBy($scope.data, 'name');

这为groupedData提供了以下数据结构，因此有key和value，其中密钥是AM和value是所有具有相同name的对象数组。

imgur

然后您可以拥有select的以下模板。

<select ng-model="selectItem">
  <optgroup ng-repeat="(key, items) in groupedData" label="{{ key }}">
    <option ng-repeat="item in items" 
            value="{{ item }}" 
            ng-bind="'order' + (items.indexOf(item) + 1)"></option>
  </optgroup>    
</select>

你能得到什么，不是吗？

imgur

如何将ng作为ng-options组中的订单号转换为..？

3 个答案: