亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Verzeichnis suchen
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
Figuren

AngularJS: API: ng/directive/ngModel

ngModel

  1. - directive in module ng

ngModel指令使用NgModelController綁定一個(gè) input,select, textarea (或自定義表單控件) 到域上的一個(gè)屬性。

ngModel 職責(zé)為：

  • 綁定視圖到模型，如 input, textarea或select 等指令。
  • 提供驗(yàn)證操作 (如必輸、數(shù)字、email、url)。
  • 維護(hù)控件的狀態(tài) (有效/無(wú)效, 有改動(dòng)/無(wú)改動(dòng), 觸摸過(guò)/未觸摸, 驗(yàn)證錯(cuò)誤等)。
  • 設(shè)置元素上相關(guān)的css類(lèi) (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) ，包括動(dòng)畫(huà)。
  • 注冊(cè)控件到父 表單。

注意： ngModel 會(huì)嘗試使用表達(dá)式的計(jì)算結(jié)果來(lái)綁定到當(dāng)前域上的屬性。如果屬性在當(dāng)前域上不存在，它會(huì)立即創(chuàng)建并添加到當(dāng)前域。

使用 ngModel的最佳實(shí)踐參見(jiàn)：

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

如何使用ngModel的一些簡(jiǎn)單例子參見(jiàn)：

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

CSS類(lèi)

以下CSS類(lèi)會(huì)被添加或移除到相關(guān)聯(lián)的input/select/textarea元素上，這取決于模型的變化。

  • ng-valid 模型有效時(shí)設(shè)置。
  • ng-invalid 模型無(wú)效時(shí)設(shè)置。
  • ng-pristine 模型純凈（未變化）時(shí)設(shè)置。
  • ng-dirty 模型臟（有變化）時(shí)設(shè)置。

記住， ngAnimate可以檢測(cè)到每個(gè)類(lèi)的添加和刪除。

動(dòng)畫(huà)鉤子

模型的動(dòng)畫(huà)會(huì)被觸發(fā)，當(dāng)綁定到模型上的輸入元素關(guān)聯(lián)的CSS樣式被添加或刪除時(shí)。這些類(lèi)有: .ng-pristine, .ng-dirty, .ng-invalid 和 .ng-valid ，以及對(duì)模型本身進(jìn)行的任何其他驗(yàn)證。ngModel觸發(fā)的動(dòng)畫(huà)類(lèi)似于ngClass上的工作方式，動(dòng)畫(huà)可以使用CSS的過(guò)渡、關(guān)鍵幀，以及JS動(dòng)畫(huà)。

下面的例子簡(jiǎn)單演示了使用CSS過(guò)渡來(lái)渲染輸入元素上的樣式，當(dāng)它從有效變成無(wú)效時(shí)：

//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;
}

指令信息

  • 這個(gè)指令執(zhí)行優(yōu)先級(jí)為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

有時(shí)候綁定 ngModel到一個(gè)getter/setter函數(shù)時(shí)很有用的。getter是一種能返回一個(gè)模型表示的無(wú)參函數(shù)，setter是只有一個(gè)參數(shù)的用于設(shè)置模型內(nèi)部狀態(tài)的函數(shù)。 它對(duì)于模型內(nèi)部與視圖顯示時(shí)所用的數(shù)據(jù)形式不一致時(shí)非常有用。

最佳實(shí)踐： 最好保證getters執(zhí)行很快，因?yàn)锳ngular可能會(huì)比你其它的代碼更頻繁的調(diào)用它。

要使用它，你需要添加 ng-model-options="{ getterSetter: true }"到一個(gè)有 ng-model 元素上。你也可以添加 ng-model-options="{ getterSetter: true }" 到 <form>上，使的表單中的所有<input>都生效。參見(jiàn) ngModelOptions 獲取更多信息。

下面的例子演示如何通過(guò)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;
      }
    };
  }]);
Vorheriger Artikel： N?chster Artikel：