NgList Directives in AngularJS

This article explains how to use ngList directives in AngularJS.

About ngList Directive

This directive is a spacial type of directive which can convert input text(String) into delimited string and an array of string. It means that ng-list directive can break the string.

To break the string or to convert string to an array of string, the delimiter is used. If no delimiter is fixed then by default comma(,) is used.
We can also define our own delimiter by using regular expression.
 
Syntax: 
  1. <input ng-list="{string}">  
  2.    ...  
  3. </input>  
In the syntax {string} is option if we write like this then it will be default and comma will be used.
 

Example
  1. <!doctype html>  
  2. <html ng-app>  
  3. <head>  
  4.     <script src="angular.min.js"></script>  
  5. </head>  
  6.   
  7. <body>  
  8. By Default</br>   
  9. List: <input name="namesInput1" ng-model="names1" ng-list>  
  10. <tt>names = {{names1}}</tt><br/>  
  11.   
  12. User Defined</br>   
  13. List: <input name="namesInput2" ng-model="names2" ng-list>  
  14. <tt>names = {{names2}}</tt><br/>  
  15. </body>  
  16. </html>  

Output