AngularJS는 ng-Options에 인덱스를 추가하는 솔루션을 구현합니다.-PHP开发-php.cn

AngularJS는 ng-Options에 인덱스를 추가하는 솔루션을 구현합니다.

高洛峰

풀어 주다： 2016-12-07 17:00:03

원래의

1726명이 탐색했습니다.

이 기사의 예에서는 ng-Options에 인덱스를 추가하는 AngularJS의 솔루션을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

Angularjs 교환 그룹의 한 어린이가 Angularjs의 ng-Repeat와 같은 Angular select의 ng-Options에 인덱스 $index를 추가하는 방법을 물었습니다.

사실 이 문제에 대해 Angular 자체에서는 $index 등의 변수를 제공하지 않고 사용합니다. 그러나 이것이 우리가 이 문제에 대한 해결책을 가지고 있지 않다는 것을 의미하지는 않습니다.

이 문제를 관점에서 보면 js 배열의 첨자만 있으면 되기 때문에 객체에 첨자를 추가할 수 있다면 표현식을 옵션의 레이블로 사용하면 문제를 해결할 수 있습니다.

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

로그인 후 복사

js:

안타깝게도 JavaScript를 키/값 개체로 사용하면 키 순서가 정렬되지 않습니다. 따라서 순서가 지정되지 않은 첨자는 다음과 같이 표시됩니다.

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

로그인 후 복사

이 문제는 해결할 수 없습니다. 다행히 블로거는 또 다른 트릭을 가지고 있습니다. 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 }}

로그인 후 복사

이제 옵션이 질서정연하게 생성되었으니 드디어 완벽하게 해결할 수 있게 되었으니 이번 글도 마치겠습니다. 마지막에 실행 가능한 데모플nkr ngOptions 인덱스가 첨부되어 있습니다.

위는 ng-Options에 인덱스를 추가하는 AngularJS 솔루션의 내용입니다. 자세한 내용은 PHP 중국어 웹사이트(www. php.cn)!

var app = angular.module(&#39;plunker&#39;, []);
app.controller(&#39;MainCtrl&#39;, 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;
     });
    };
   }
]);

로그인 후 복사