AngularJS ng-list Directive

Last Updated : 16 Aug, 2022

The ng-list Directive in AngularJS is used for separating input strings and converting them into an array of strings using a separator. By default, the comma is used as a default separator. But any custom separator can be used as the value of the ng-list directive.

Syntax:

<element ng-list="delimiter"> Contents... </element>

The value of ng-list specifies the separator to be used for separating the input string.

Example 1: This example uses the ng-list Directive to convert input into an array.

HTML

<!DOCTYPE html> <html> <head> <title>ng-list Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>ng-list Directive</h2> <div ng-controller="geek"> <p>Enter Input: <input type="text" ng-model="list" ng-list="-"> </p> {{list}} </div> <script>  var app = angular.module("app", []);  app.controller('geek', ['$scope',   function($scope) {  $scope.list = [];  }]);  </script> </body> </html>

Output:

Example 2: In this example, when we include the ng-list Directive, then it will convert the text in the input field into an array.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> </head> <body style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-list Directive</h2> <div ng-app=""> <p> Use a comma to separate the texts in the input field </p> <input ng-model="content" ng-list/> <pre>{{content}}</pre> </div> </body> </html>