Using $index with the AngularJS ‘ng-options’ directive?

by

Since arrays are very similar to objects in JavaScript, you can use the syntax for “object data sources”. The trick is in the brackets in the ng-options part:

var choices = [
  'One',
  'Two',
  'Three'
];

In the template:

<select
  ng-model="model.choice"
  ng-options="idx as choice for (idx, choice) in choices">
</select>

In the end, model.choice will have the value 0, 1, or 2. When it’s 0, you will see One; 1 will display Two, etc. But in the model, you will see the index value only.

I adapted this information from “Mastering Web Application Development with AngularJS” by PACKT Publishing, and verified at the Angular reference documentation for select.

More Related Contents:

  1. AngularJS: Service vs provider vs factory
  2. File Upload using AngularJS
  3. AngularJS Multiple ng-app within a page
  4. AngularJS: ng-model not binding to ng-checked for checkboxes
  5. Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
  6. AngularJS: How to make angular load script inside ng-include?
  7. Injecting $scope into an angular service function()
  8. AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation
  9. Enforcing unique usernames with Firebase simplelogin
  10. Angular $scope.$apply vs $timeout as a safe $apply
  11. How not to change url when show 404 error page with ui-router
  12. How do I fix the npm UNMET PEER DEPENDENCY warning?
  13. Using angularjs filter in input element
  14. How to access global js variable in AngularJS directive
  15. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  16. Click() function isn’t working in protractor scripts
  17. Send FormData with other field in AngularJS
  18. AngularJs: Reload page
  19. disable nganimate for some elements
  20. How to access/update $rootScope from outside Angular
  21. How to specify headers parameter for custom Angular $resource action
  22. AngularJS Folder Structure [closed]
  23. Filter results 6 through 10 of 100 with ng-repeat in AngularJS
  24. Angular filter works but causes “10 $digest iterations reached”
  25. AngularJS $watch vs $watchCollection: which is better for performance?
  26. Track to see when a view changes in angularjs
  27. How to detect browser using angularjs?
  28. XMLHttpRequest cannot load and Response for preflight has invalid HTTP status code 405
  29. Prepend optional attribute in angular ui-router URL
  30. E2E mock $httpBackend doesn’t actually passThrough for me

Leave a Comment