zoukankan      html  css  js  c++  java
  • [AngularJS 1.6] ngModelOptions and inheritance

    Problem with ngModleOptions before 1.6:

    <input
      type="text"
      name="fullname"
      ng-model="$ctrl.applicant.name"
      ng-model-options="{
        'updateOn': 'default blur',
        'debounce': {
          'default': 200,
          'blur': 0
        }
      }">
    <input
      type="email"
      name="email"
      ng-model="$ctrl.applicant.email"
      ng-model-options="{
        'updateOn': 'default blur',
        'debounce': {
          'default': 200,
          'blur': 0
        }
      }">
    <input
      type="text"
      name="postcode"
      ng-model="$ctrl.applicant.postcode"
      ng-model-options="{
        'updateOn': 'default blur',
        'debounce': {
          'default': 200,
          'blur': 0
        }
      }">

    You repeat a lot, code doesn't look nice, from v1.6:

    <form ng-submit="$ctrl.onSubmit()" ng-model-options="{
      'updateOn': 'default blur',
      'debounce': { 'default': 200, 'blur': 0 }
    }">
      <input
        type="text"
        name="fullname"
        ng-model="$ctrl.applicant.name">
      <input
        type="email"
        name="email"
        ng-model="$ctrl.applicant.email">
      <input
        type="text"
        name="postcode"
        ng-model="$ctrl.applicant.postcode">
    </form>

    We also have the ability to override specific options, whilst inheriting others using $inherit.

    <form ng-submit="$ctrl.onSubmit()" ng-model-options="{
      'allowInvalid': true,
      'updateOn': 'default blur',
      'debounce': { 'default': 200, 'blur': 0 }
    }">
      <!-- omitted other inputs for brevity -->
      <input
        type="text"
        name="postcode"
        ng-model="$ctrl.applicant.postcode"
        ng-model-options="{
          '*': '$inherit',
          'updateOn': 'blur'
        }">
    </form>

    The above '*' uses the wildcard to tell ngModelOptions to inherit all options from the parent - so you don’t have to keep repeating them but can fine-tune individual inputs. This is extremely powerful and productive.

    We can also optionally choose to fallback to ngModelOptions default values (not the ones specified on the parent container) if we omit the wildcard $inherit. For example:

    <form ng-submit="$ctrl.onSubmit()" ng-model-options="{
      'allowInvalid': true,
      'updateOn': 'default blur',
      'debounce': { 'default': 200, 'blur': 0 }
    }">
      <!-- omitted other inputs for brevity -->
      <input
        type="text"
        name="postcode"
        ng-model="$ctrl.applicant.postcode"
        ng-model-options="{
          'updateOn': '$inherit'
        }">
    </form>

    This new ngModelOptions binding will in fact override the entire inheritance chain for that particular input - however it does inherit the updateOn property.

  • 相关阅读:
    java web开发中会遇到的异步执行方案
    MySQL中进行树状所有子节点的查询
    node.js ----NPM使用介绍
    Node.js--学习笔记
    node.js介绍及Win7环境安装测试(转)
    Jmeter中Websocket协议支持包的使用(转)
    jmeter---将回应数据写入到文件
    JMeter 插件 Json Path 解析 HTTP 响应 JSON 数据(转)
    python + Pyglet ---播放视频
    转 RTSP客户端模拟器(TCP方式,Python实现)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9474929.html
Copyright © 2011-2022 走看看