Javascript 如何将标识转换为ng options group by..中的订单号。。？

这是我的密码

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>

---

这是我的阵列，我使用的标签是AM、PM、AWT、WAT。每个都有一个顺序（）。我希望每个标签订单都显示编号，如AM中的订单1、PM中的订单1、订单2、订单3等等。如果我在数组中添加新条目，那么最近添加的条目应该显示在下拉列表中，订单号和相关标签显示在数据中

您不能在

ng选项中使用
$index
。但是，您可以通过对传递当前选项的数据项使用
indexOf
来获取当前索引

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



Demo
您不能在
ng选项中使用
$index
。但是，您可以通过对传递当前选项的数据项使用
indexOf
来获取当前索引

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



Demo
您不能将
$index
与
ng选项一起使用。请改用
indexOf
。您可以这样做：

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

您不能将
$index
与
ng选项一起使用。请改用
indexOf
。您可以这样做：

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

我建议您包括一些类似外部库的内容，并将数据格式化为更方便的结构。然后，您可以使用
ng repeat
，而不是用
ng选项将头撞在墙上

考虑以下几点：

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

这为
groupedData
提供了以下数据结构，因此有
key
和
value
，其中key是例如
AM
，value是具有相同
名称的对象数组


然后，您可以为您的
选择以下模板

<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 repeat
，而不是用
ng选项将头撞在墙上

考虑以下几点：

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

这为
groupedData
提供了以下数据结构，因此有
key
和
value
，其中key是例如
AM
，value是具有相同
名称的对象数组


然后，您可以为您的
选择以下模板

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



这就是你想要的，不是吗

哦，太好了，谢谢。以及如何在数据中显示选定的标签。并且可以在onload页面上显示在下拉菜单中选择的一些值？？？@Abhishek-您必须设置
$scope。选择item
到您想从
$scope.data
中设置的任何项目。例如
$scope.selectItem=$scope.data[0]
。html中有一些细微的变化，我已经纠正了它。请看这里，但页面上的onload（第一次出现）下拉列表未选择任何值，并通过下拉列表更改值它在数据中不反映任何内容：请在fiddle中选中此项。下拉列表在页面加载本身上被选中。有一个打字错误，我刚把它修好。再试一次是的，这是有效的。非常感谢@ShankarSangoli。如果我在数组中添加了新条目，那么在下拉列表中它是如何显示选中的。哦，非常感谢。以及如何在数据中显示选定的标签。并且可以在onload页面上显示在下拉菜单中选择的一些值？？？@Abhishek-您必须设置
$scope。选择item
到您想从
$scope.data
中设置的任何项目。例如
$scope.selectItem=$scope.data[0]
。html中有一些细微的变化，我已经纠正了它。请看这里，但页面上的onload（第一次出现）下拉列表未选择任何值，并通过下拉列表更改值它在数据中不反映任何内容：请在fiddle中选中此项。下拉列表在页面加载本身上被选中。有一个打字错误，我刚把它修好。再试一次是的，这是有效的。非常感谢@ShankarSangoli。如果我在数组中添加了新条目，然后在下拉列表中选择它的显示方式，那么还有一个问题。很好&谢谢。还有一件事是如何在数据中显示选定的标签。并且可以在加载页面上显示在下拉列表中选择的某些值？？？@Abhishek您的
selectedItem
shud应该
$scope.selectItem=$scope.data[0].id它在console.log中工作，但在fiddle中不工作。您是否可以选中此项，并且也未选择“加载”下拉列表。请在fiddle中检查此项。@Abhishek要使AM/PM正常工作，您需要删除
.id
部分。我检查这个错误。谢谢你的提问。如果我在数组中添加了新条目，然后在下拉列表中选择它的显示方式，那么还有一个问题。很好&谢谢。还有一件事是如何在数据中显示选定的标签。并且可以在加载页面上显示在下拉列表中选择的某些值？？？@Abhishek您的
selectedItem
shud应该
$scope.selectItem=$scope.data[0].id它在console.log中工作，但在fiddle中不工作。您是否可以选中此项，并且也未选择“加载”下拉列表。请在fiddle中检查此项。@Abhishek要使AM/PM正常工作，您需要删除
.id
部分。我检查这个错误。谢谢你的提问。如果我在数组中添加了新条目，那么在下拉列表中它是如何显示选中的。嘿#MikkoViitala感谢您的回复。我尝试过这个，但在下拉列表中没有显示任何内容。你能检查一下这个吗。我在哪里添加了loadsh，并将您的代码放在这里面，请检查我哪里错了。谢谢……）。哇，它起作用了。请再告诉我一件事。如果用现有的密钥添加新条目，那么它们将如何在下拉列表中显示。我不知道，在你们的小提琴中测试。如果添加到groupedData，则值将被替换，如果添加到data，则再次分组。嘿35; MikkoViitala感谢您的回复。我尝试过这个，但在下拉列表中没有显示任何内容。你能检查一下这个吗。我是一个