0

これは私のコードです

フィドルリンク

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 、 order1 、 order2 、PMの order3などの番号で各ラベルの注文を表示したい。配列に新しいエントリを追加すると、最近追加されたエントリがドロップダウンに表示され、注文番号と関連ラベルがDataに表示されます。

4

3 に答える 3

2

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

于 2015-06-11T13:07:59.347 に答える
1

lodashなどの外部ライブラリを含めて、データをより便利な構造にフォーマットすることをお勧めします。次に、 で頭を壁にぶつける代わりにng-options、 を使用できますng-repeat。

次の点を考慮してください。

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

これにより、 の次のデータ構造が得られます。groupedDataそのためkey、valueキーはegAMであり、値はすべて同じオブジェクトの配列です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>

あなたが求めているものをあなたに与えるのはどちらですか？

イムグル

于 2015-06-18T15:23:58.733 に答える
1

$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>
于 2015-06-11T13:08:03.667 に答える