AngularJS implementiert eine Lösung zum Hinzufügen eines Index zu ng-Options

Das Beispiel in diesem Artikel beschreibt die Lösung des Hinzufügens eines Index zu ng-Options in AngularJS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ein Kind in der Angularjs-Austauschgruppe fragte, wie man einen Index $index zu den ng-Options von Angular select wie ng-Repeat von Angularjs hinzufügen kann.

Tatsächlich stellt Angular selbst für dieses Problem keine Variablen wie $index zur Verfügung. Das heißt aber nicht, dass wir keine Lösungen für dieses Problem haben.

Um dieses Problem ins rechte Licht zu rücken: Alles, was wir brauchen, ist der Index des js-Arrays. Wenn wir also dem Objekt einen Index hinzufügen können, kann die Verwendung eines Ausdrucks als Beschriftung der Option das Problem lösen.

Aber der erste Eindruck erinnert mich daran, dass das js-Array ursprünglich ein Schlüssel-/Wertobjekt ist, der Schlüssel jedoch der Array-Index ist, sodass wir das folgende Design haben:

html:

<pre class="brush:php;toolbar:false">{{ a | json }}

js:

$scope.getDesc1 = function(key, value) {
  return (parseInt(key, 10) + 1) + "->" + value.field;
};

Wenn Sie JavaScript als Schlüssel-/Wertobjekt verwenden, sind die Schlüssel leider ungeordnet . Daher werden die ungeordneten Indizes wie folgt angezeigt:

<select ng-model="a" ng-options="l.field as getDesc1(key,value) for (key,value) in t "
 class="ng-valid ng-dirty">
 <option value="0" >1->jw_companyTalent</option>
 <option value="1" >2->jw_reportgroup</option>
 <option value="10" >11->jw_ads</option>
 <option value="11" >12->jw_jobcomment</option>
 <option value="12" >13->jw_companyInfo</option>
 ....
</select>

Das kann also nicht gelöst werden. Glücklicherweise hat der Blogger einen weiteren Trick: ngOptions unterstützt den Angularjs-Filter, sodass wir dem Datenquellenobjekt ein Bestellfeld hinzufügen können, um den Index als Seriennummer zu markieren. Und Sie können in einem Angular-Problem von vor 2 Jahren sehen, dass Angular das Problem behoben hat und die Option das Array in tiefgestellter Reihenfolge generiert.

html:

<pre class="brush:php;toolbar:false">{{ b | json }}

js:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
   $scope.t = [{
    "field": "jw_companyTalent"
   }, {
    "field": "jw_reportgroup"
   }];
   $scope.getDesc = function(l) {
    return l.order + "->" + l.field;
   };
}).filter("index", [
   function() {
    return function(array) {
     return (array || []).map(function(item, index) {
      item.order = index + 1;
      return item;
     });
    };
   }
]);

Jetzt werden die Optionen geordnet generiert. Endlich können wir es perfekt lösen, sodass auch dieser Artikel zu Ende geht. Am Ende ist der ausführbare demoplnkr ngOptions-Index angehängt.

Das Obige ist der Inhalt der AngularJS-Lösung zum Hinzufügen eines Index zu ng-Options. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn )!