提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[AngularJS] Angular 1.3 ng-model-options - getterSetter

Angular model 1.3 angularjs NG Options
2023-09-14 09:00:55 时间

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

 

相关文章