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

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、PM 中的 order1、order2、order3 等等。如果我在数组中添加新条目，那么最近添加的条目应该显示在下拉列表中，订单号和相关标签显示在 Data 中。

Answer 1

您不能在 ng-options 中使用 $index。但是，您可以通过在传递当前选项的数据项上使用 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-repeat.

而不是用 ng-options 撞墙

考虑以下几点：

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

这为 groupedData 提供了以下数据结构，因此有 key 和 value，其中键例如AM 值是具有相同 name.

的对象数组

那么您的 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>

哪个给了你想要的，不是吗？

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

How to convert id as order number in ng-options group by..?

javascript

angularjs

angularjs-ng-options