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.

  • 相关阅读:
    Asp.NetCore3.1 WebApi 获取配置json文件中的数据
    Dapper同时操作任意多张表的实现
    将视图批量新增到PowerDesigner中并以model图表的形式展示
    .NetCore3.1获取文件并重新命名以及大批量更新及写入数据
    .NetCore 简单的使用中间件
    比较复杂的SQL转Linq
    Asp.NetCore3.1版本的CodeFirst与经典的三层架构与AutoFac批量注入
    Git与GitLab的分支合并等简单的测试操作
    Winform的控件以及DataGridView的一般使用
    在Linux系统中运行并简单的测试RabbitMq容器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9474929.html
Copyright © 2011-2022 走看看