javascript - 如何将 id 转换为 ng-options group by..中的订单号？

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的数组。每个都有一个订单（请检查小提琴链接）。我希望每个标签订单都显示为AM中的 order1、 PM中的 order1、order2、order3等数字。如果我在数组中添加新条目，那么最近添加的条目应该显示在下拉菜单中，订单号和相关标签显示在Data中。

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

你不能使用$indexwith 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 是 egkey并且value 是所有具有相同 的对象数组。valueAMname

然后你可以为你的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>

哪个给了你你所追求的，不是吗？