zoukankan      html  css  js  c++  java
  • [AngularJS] Angular 1.3 ng-model-options

    getterSetter:  boolean value which determines whether or not to treat functions bound to ngModel as getters/setters to have greater control over your model.

    allowInvalid: boolean value which indicateds that the model can be set with values that did not validate correctly instead of the default behavior of setting the model to undefined.

    For example input type="email".

    <!DOCTYPE html>
    <html>
    <head>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
      <title>What's new in Angular 1.3</title>
    </head>
    <body ng-app="app" ng-controller="MainCtrl as vm">
      <h1>Angular {{vm.angularVersion}}</h1>
      <h2>
        ngModelOptions
        <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
      </h2>
      <hr />
      
      <h2>Demo</h2>
      
      
      <form name="myForm" novalidate>
        <label>
          Some input:
          <input
                 type="email"
                 name="myField" 
                 ng-model="vm.inputValue"
                 ng-model-options="vm.modelOptions"
                 required />
          
        </label>
        <button type="submit">Submit</button>
      </form>
        
      Bound value: <span ng-bind="vm.inputValue"></span> <br />
      Field Error State: <pre>{{myForm.myField.$error | json}}</pre> <br />
      Form Error State: <pre>{{myForm.$error | json}}</pre>
      myForm.$submitted: {{myForm.$submitted}}
      
    </body>
    </html>
    var app = angular.module('app', []);
    
    app.controller('MainCtrl', function MainCtrl() {
      'use strict';
      
      var vm = this,
          _val = '';
      vm.angularVersion = angular.version.full;
      vm.modelOptions = {
        getterSetter: true,
        allowInvalid: true
      };
      vm.inputValue = function(val) {
        return angular.isDefined(val) ? (_val = val) : _val;
      }
    });

    Read More: https://egghead.io/lessons/angularjs-new-in-angular-1-3-ng-model-options-getters-and-setters

  • 相关阅读:
    jQuery对表单的操作
    js-工厂模式
    js中call、apply、bind的区别
    js实现重载和重写
    js封装/继承/多态
    变量的解构赋值
    var & let & const 的区别
    jQuery之animate中的queue
    jQuery之动画
    .trigger
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4099973.html
Copyright © 2011-2022 走看看