AngularJS 中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
目录 搜索
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe

©
本文档使用 PHP中文网手册 发布

文字

AngularJS: API: ng/directive/ngModel

ngModel

  1. - 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;
      }
    };
  }]);
上一篇： 下一篇：