AngularJS Select with ngRepeat and ngOptions

AngularJS Select with ngRepeat and ngOptions

HTML select element with AngularJS data-binding. 

The select directive is used together with ngModel to provide data-binding between the scope and the select tag control (including setting default values). It also handles dynamic option tag elements, which can be added using the ngRepeat or ngOptions directives. The ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage: Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on option tag elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
  • more flexibility in how the select's tag model is assigned via the select as part of the comprehension expression.
  • reduced memory consumption by not creating a new scope for each repeated instance.
  • increased render speed by creating the options in a documentFragment instead of individually.

The ng-repeat directive has its limitations, the selected value must be a string.

html:


script:


output:

Click here to download the working sample.

Reference:


Comments

Post a Comment

Popular posts from this blog

Typeahead using Angular JS and Bootstrap

Image
Typeahead using Angular JS and Bootstrap Creating a simple type-ahead or autocomplete using Angular JS and Bootstrap. " Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input. It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. This directive works with promises, meaning you can retrieve matches using the $http service with minimal effort. " Use   bootstrap type-ahead  into the input element.  For example: In the above example uib-typeahead is a bootstrap directive, through which we retrieve data by a http request.  The typeahead-on-select  directive is used to indicate what function has to be done while selecting on the suggested result. html: script: Click here to download working sample Reference:  [1] Angular Bootstrap Ty...
Read more

AngularJS Checkbox Select

Image
AngularJS Checkbox Select The filter   filter allows us to filter an array, and return an array containing only the matching items. This filter can only be used for arrays. In this post we will look about custom filters. Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned in angularJS API AngularJS filter Doc [1] supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below html: script: output: Click here to download working sample References: [1]  AngularJS Filter
Read more

Sorting DIV's using jQuery

Image
Sort DIVs alphabetically without destroying and recreating the content. Sort a bunch of div elements on my page with the click of a button. 1. Sort the element array with sort()[1]  2. Reattach (in their sorted state) with appendTo()[2] html :   script: Click here to download working sample Reference: [1]. sort() [2]. appendTo()
Read more