如何在AngularJS中有条件地添加指令

时间:2018-11-07 10:55:52

标签: javascript angularjs

请告诉我如何在angular js中有条件地添加指令。实际上,我是从 JSON 生成视图的,我只想将自定义指令添加到仅某些字段具有checkInput属性。示例我创建了一个自定义指令名称“ checkInput” ,我想在具有“ checkInput”属性为true的输入字段中添加该名称

"First Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
     "required":true,
     "checkInput":true
  },

能否请您告诉我我将如何添加

这是我的代码 http://plnkr.co/edit/YmIMEGHm7E48wZQT9ZSb?p=preview

.directive("checkInput", function() {
  return {
 require: "ngModel",
 //name your scope key and value.

 link: function(scope, element, attributes, modelVal) {

    modelVal.$validators.checkInput= function(val) {
       var phonenoRegex = /^[0-9]+$/;
       if (val.match(phonenoRegex))
       {
      return false
       }
       else{
         return true
       }

        console.log(val);

    };

    scope.$watch("val", function() {
        modelVal.$validate();
    });

}

};
});

更新

在我的示例中,我只有名字具有“ checkInput”:true 属性。因此,我只想在名字中添加此指令。并非所有输入字段

是否有任何更新?

任何更新

1 个答案:

答案 0 :(得分:0)

@Joy您只想验证名字。您可以解决此问题。

<div ng-if="(key=='First Name')">
    <input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked" check-input>
</div>
<div ng-if="(key!='First Name')">
    <input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked" >
</div>

我希望我回答了你的问题。接受答案,如果您有任何疑问,请告诉我。 :)