AngularJS ng-list Directive

The AngularJS ng-list directive is used to convert given text input between a delimited string and an array of strings. The default delimiter is a comma. But you can specify a custom delimiter as well.

Syntax

<label>List: <input name="colorInput" 
ng-model="color" ng-list required></label>

AngularJS ng-list Directive Example

<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->        
<title>ngList Test Sample</title>        
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>        
        
<script>        
    var app = angular.module('ngListExample', [])
    app.controller('ngListController', ['$scope', function($scope) {
      $scope.color = ['Red', 'Yellow', 'Green','Black'];
    }]);
  
</script>        
</head>        
<body style="background-color:#DDE4E9;" ng-app="ngListExample">        
  <fieldset style="background-color:#DDE4E9;">          
    <legend>AngulerJS ngList Example</legend> 
    
<div ng-controller="ngListController" style="font-family:arial;">   
    
  <form name="myform">  
   <label>List: <input name="colorInput" ng-model="color" ng-list required></label>
 <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"     
        >Color =  {{ color }}</p> 
    
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"     
        ng-show='!myform.colorInput.$valid'>Enter color</p>      
  </form>   
</div>    
      </fieldset>         
</body>        
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-list Directive

AngularJS ng-list Directive Example

Recent Articles