AngularJS は ng-Options にインデックスを追加するソリューションを実装します

この記事の例では、AngularJS が ng-Options にインデックスを追加するソリューションについて説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

Angularjs 交換グループの子供が、Angular js の ng-Repeat のような Angular select の ng-Options にインデックス $index を追加する方法を尋ねました。

実際、これについては問題点 Angular自体は使用する$indexなどの変数を提供していないと言われています。しかし、それは私たちがこの問題に対する解決策を持っていないという意味ではありません。

この問題を大局的に考えると、必要なのは js 配列の添字だけなので、オブジェクトに添字を追加し、式をオプションのラベルとして使用できれば、問題は解決できます。

しかし、第一印象は、js配列は元々キー/値オブジェクトであることを思い出させますが、キーは配列の添字であるため、次の設計になっています:

html:

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

js :

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

しかし、残念ながら、これを JavaScript のキー/値オブジェクトとして使用すると、キーは順序付けされないため、順序付けされていない添え字は次のように表示されます。解決しました。幸いなことに、ブロガーには別のトリックがあります。ngOptions は Angularjs フィルターをサポートしているため、データ ソース オブジェクトに順序フィールドを追加して添え字をシリアル番号としてマークできます。 2 年前の Angular の問題を見ると、Angular が問題を修正しており、このオプションにより添字順に配列が生成されることがわかります。

html:

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

js:

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

順番に選択肢が生成され、最終的に完璧に解けたのでこの記事は終わります。最後に、実行可能な demoplnkr ngOptions インデックスが添付されています。

上記は、ng-Options にインデックスを追加する AngularJS のソリューションの内容です。詳細については、PHP 中国語 Web サイト (www.php.cn) を参照してください。 ！