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.

  • 相关阅读:
    07 selenium模块基本使用
    06 高性能异步爬虫
    05 request高级操作
    04 验证码识别
    03 数据解析
    02 requests模块
    01 爬虫简介
    Get和Post的正解
    pytoch之 encoder,decoder
    pytorch之 RNN 参数解释
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9474929.html
Copyright © 2011-2022 走看看