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

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应用类

但 Angular 本身提供了良好的指令，称为 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>

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