Question

我正在为input验证创建自定义指令。在这里我检查了输入长度，如果输入长度为零，它将显示错误，如果输入填充了字符，则不能显示，我想隐藏它。

这是我的代码：

app.directive("formValidate", function() {
  return {
    require: 'ngModel',
    template: '<p>Please Fill this Field</p>',
    link: function(scope, elem, attr) {

        scope.$watch(attr['ngModel'], function(value) {

            if (((value || '').toString()).length == 0) {
                var errorMessage = angular.element("<p class='error'>This field is requiured!</p>");
                errorMessage.insertAfter(elem);
                //$compile(errorMessage)(scope);
            } else {
                 // What to do??
            }
        })


   <input form-validate required md-no-asterisk ng-model="newEmployee.name" type="text" id="name" name="name">

Answer 1

如果要使用类隐藏元素，则可以使用

创建一个类

display:none

属性，并使用ng-class

应用类

但是角度本身提供了称为ng-show或ng-hide的良好指令。

ng-show或ng-hide将呈现DOM元素，但只会在满足条件时隐藏。如果使用ng-if，除非条件满足，否则它甚至不会渲染DOM。

if (((value || '').toString()).length == 0) {
   $scope.hasError = true;
}else{
//do whatever 
}

HTML中的

只需使用

<p ng-show="hasError">Your Error Msg</p>

还有很多其他方法可以用来做同样的事情。

如何根据条件隐藏角度元素

1 个答案: