ngList

- directive in module ng

Contents

Overview

Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to ng-list=", ". You can specify a custom delimiter as the value of the ngList attribute - for example, ng-list=" | ".

The behaviour of the directive is affected by the use of the ngTrim attribute.

If ngTrim is set to "false" then whitespace around both the separator and each list item is respected. This implies that the user of the directive is responsible for dealing with whitespace but also allows you to use whitespace as a delimiter, such as a tab or newline character.
Otherwise whitespace around the delimiter is ignored when splitting (although it is respected when joining the list items back together) and whitespace around each list item is stripped before it is added to the model.

Directive Info

This directive executes at priority level 100.

Usage

as attribute:
```
<ANY
  [ng-list="string"]>
...
</ANY>
```

Arguments

Param	Type	Details
ngList (optional)	string	optional delimiter that should be used to split the value.

Examples

Validation

angular.module('listExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.names = ['morpheus', 'neo', 'trinity'];
}]);

<form name="myForm" ng-controller="ExampleController">
 <label>List: <input name="namesInput" ng-model="names" ng-list required></label>
 <span role="alert">
   <span class="error" ng-show="myForm.namesInput.$error.required">
   Required!</span>
 </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.exactBinding('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('["morpheus","neo","trinity"]');
  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');
});

Load online demo

Splitting on newline

<textarea ng-model="list" ng-list="&#10;" ng-trim="false"></textarea>
<pre>{{ list | json }}</pre>

it("should split the text by newlines", function() {
  var listInput = element(by.model('list'));
  var output = element(by.binding('list | json'));
  listInput.sendKeys('abc\ndef\nghi');
  expect(output.getText()).toContain('[\n  "abc",\n  "def",\n  "ghi"\n]');
});

Load online demo