Improve this Doc View Source

Text input that converts between a delimited string and an array of strings. The delimiter can be a fixed string (by default a comma) or a regular expression.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <input
        [ng-list=""]>
      ...
      </input>

### Arguments

Param | Type | Details
--- | --- | ---
ngList (optional) | string | optional delimiter that should be used to split the value. If specified in form `/something/` then the value will be converted into a regular expression.

## Example

Edit in Plunker

    <script>
      angular.module('listExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.names = ['igor', 'misko', 'vojta'];
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      List: <input name="namesInput" ng-model="names" ng-list required>
      <span class="error" ng-show="myForm.namesInput.$error.required">
        Required!</span>
      <br>
      <tt>names = {{names}}</tt><br/>
      <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
      <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
     </form>

    var listInput = element(by.model('names'));
    var names = element(by.binding('{{names}}'));
    var valid = element(by.binding('myForm.namesInput.$valid'));
    var error = element(by.css('span.error'));

    it('should initialize to model', function() {
      expect(names.getText()).toContain('["igor","misko","vojta"]');
      expect(valid.getText()).toContain('true');
      expect(error.getCssValue('display')).toBe('none');
    });

    it('should be invalid if empty', function() {
      listInput.clear();
      listInput.sendKeys('');

      expect(names.getText()).toContain('');
      expect(valid.getText()).toContain('false');
      expect(error.getCssValue('display')).not.toBe('none');        });