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.

  • 相关阅读:
    总结PLSQL的快捷键以及使用技巧
    WebStorm 常用快捷键
    bootStrap小结3
    bootStrap小结2
    bootStrap小结1
    DataTable操作
    2017春 前端自动化(一)构建工具的搭建
    前端自动化之(一)—浏览器自动实时刷新
    基于div表单模拟右对齐
    纯css去实现loading动画效果图
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9474929.html
Copyright © 2011-2022 走看看