AngularJS: API: ng/directive/ngModel

ngModel

- directive in module ng

ngModel指令使用NgModelController绑定一个 input,select, textarea (或自定义表单控件) 到域上的一个属性。

ngModel 职责为：

绑定视图到模型，如 input, textarea或select 等指令。
提供验证操作 (如必输、数字、email、url)。
维护控件的状态 (有效/无效, 有改动/无改动, 触摸过/未触摸, 验证错误等)。
设置元素上相关的css类 (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) ，包括动画。
注册控件到父表单。

注意： ngModel 会尝试使用表达式的计算结果来绑定到当前域上的属性。如果属性在当前域上不存在，它会立即创建并添加到当前域。

使用 ngModel的最佳实践参见：

[https://github.com/angular/angular.js/wiki/Understanding-Scopes]

如何使用ngModel的一些简单例子参见：

input
- text
- checkbox
- radio
- number
- email
- url
- date
- dateTimeLocal
- time
- month
- week
select
textarea

CSS类

以下CSS类会被添加或移除到相关联的input/select/textarea元素上，这取决于模型的变化。

ng-valid 模型有效时设置。
ng-invalid 模型无效时设置。
ng-pristine 模型纯净（未变化）时设置。
ng-dirty 模型脏（有变化）时设置。

记住， ngAnimate可以检测到每个类的添加和删除。

动画钩子

模型的动画会被触发，当绑定到模型上的输入元素关联的CSS样式被添加或删除时。这些类有: .ng-pristine, .ng-dirty, .ng-invalid 和 .ng-valid ，以及对模型本身进行的任何其他验证。ngModel触发的动画类似于ngClass上的工作方式，动画可以使用CSS的过渡、关键帧，以及JS动画。

下面的例子简单演示了使用CSS过渡来渲染输入元素上的样式，当它从有效变成无效时：

//be sure to include ngAnimate as a module to hook into more
//advanced animations
.my-input {
  transition:0.5s linear all;
  background: white;
}
.my-input.ng-invalid {
  background: red;
  color:white;
}

指令信息

这个指令执行优先级为0.

用法

作为属性使用:
```
<input>
...
</input>
```

示例

index.html

<script>
 angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', Function($scope) {
     $scope.val = '1';
   }]);
</script>
<style>
  .my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
  }
  .my-input.ng-invalid {
    color:white;
    background: red;
  }
</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="ExampleController">
  <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>

绑定到getter/setter

有时候绑定 ngModel到一个getter/setter函数时很有用的。getter是一种能返回一个模型表示的无参函数，setter是只有一个参数的用于设置模型内部状态的函数。它对于模型内部与视图显示时所用的数据形式不一致时非常有用。

最佳实践： 最好保证getters执行很快，因为Angular可能会比你其它的代码更频繁的调用它。

要使用它，你需要添加 ng-model-options="{ getterSetter: true }"到一个有 ng-model 元素上。你也可以添加 ng-model-options="{ getterSetter: true }" 到 <form>上，使的表单中的所有<input>都生效。参见 ngModelOptions 获取更多信息。

下面的例子演示如何通过getter/setter使用 ngModel ：

index.html

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input Type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ getterSetter: true }" />
  </form>
  <pre>user.name = <span ng-bind="user.name()"></span></pre></div>

app.js

angular.module('getterSetterExample', [])
  .controller('ExampleController', ['$scope', Function($scope) {
    var _name = 'Brian';
    $scope.user = {
      name: Function (newName) {
        if (angular.isDefined(newName)) {
          _name = newName;
        }
        return _name;
      }
    };
  }]);