js STUDIO

ngList

概要

区切り文字と文字列の配列を変換するテキストインプットです。 区切り文字は、文字列(デフォルトはカンマ)、または正規表現を指定することが可能です。

使用方法 

<input ng-list="{string}">
   ...
</input>

引数

引数 説明
ngList(optional)

型：string

値を区切るのに使用する任意の文字列を指定します。 もし、/文字列/のような形式で指定すると、正規表現が使用されます。

デモ 

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      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>
  </body>
</html>

function Ctrl($scope) {
  $scope.names = ['igor', 'misko', 'vojta'];
}

it('should initialize to model', function() {
  expect(binding('names')).toEqual('["igor","misko","vojta"]');
  expect(binding('myForm.namesInput.$valid')).toEqual('true');
  expect(element('span.error').css('display')).toBe('none');
});

it('should be invalid if empty', function() {
  input('names').enter('');
  expect(binding('names')).toEqual('[]');
  expect(binding('myForm.namesInput.$valid')).toEqual('false');
  expect(element('span.error').css('display')).not().toBe('none');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.names = ['igor', 'misko', 'vojta'];
}
</script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      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>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。