ANGULARJS implementation in Ng-options Plus index solution _angularjs

Source: Internet
Author: User

This article illustrates the solution of ANGULARJS implementation in Ng-options Plus index. Share to everyone for your reference, specific as follows:

There is a child learning path in ANGULARJS Communication group How to add an index ng-repeat to the ng-options of a angular select like Angularjs $index.

In fact, the angular itself does not provide variables such as $index to use for this problem. But it's not that we don't have a solution for the problem.

To replace this problem with the point of view, we need is the JS array subscript, so if we can add subscript on the object, use the expression as option label can be solved.

But the first impression reminds me of the JS array is a Key/value object, but the key array subscript only, so there are the following design:

Html:

<pre>{{A | json}}</pre>
<select ng-model= "a" ng-options= "Value.field as GETDESC1 (Key,value) for ( Key,value) in T "></select>

Js:

$scope. GETDESC1 = function (key, value) {return
  (parseint (key, ten) + 1) + "->" + Value.field;
};

Unfortunately, if you were to use him as a Key/value object for JavaScript, then key would be unordered, so there was a disorderly subscript as follows:

<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= "Ten" >11->jw_ads</option>
 <option value= "11" >12->jw_jobcomment</option>
 <option value= "a" >13->jw_companyInfo</option>
 ....
</select>

So this is impossible to solve. Fortunately bloggers also have a trick, ngoptions support Angularjs filter, so we can add an order field on the data source object labeled subscript as the ordinal number. And you can see in the issue of a angular 2 years ago that angular has fix issue,option the array to be generated in subscript order.

Html:

<pre>{{B | json}}</pre>
<select ng-model= "B" ng-options= "L.field as GetDesc (L) for L in T | index" & Gt;</select>

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;}
     );
    };


The option is in order to generate, finally we can finally solve the perfect, so this article will also end. At the end of the attached can be operated Demoplnkr ngoptions index;

I hope this article will help you to Angularjs program design.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.