Question

我试图隐藏一个表格所有＆＃39;线条＆＃39;其输入已禁用且为空（即删除未从只读表单填充的字段）。

使用控制台中的jQuery非常容易：

$('.input-group > input:disabled').each(function(){
    if($(this).val().length==0){
        $(this).parent('.input-group').remove();
    }
});

但是当我想对它做出指示时，这变得很棘手（为了使AngularJs兼容，因为我的应用程序是一个angularJs）。

基本上，每个字段都有这个（引导程序）结构：

<div class="input-group">
 <span class="input-group-addon">Field Label</spanS
 <input ng-disabled="someExpression" ng-model="someModel"/>
</div>

所以我决定创建一个名为＆＃34; inputGroup＆＃34;的指令。仅应用于匹配类（＆＃39; C＆＃39;），删除该元素，并提供其输入＆＃39;被禁用并且空了..我无法让它工作，因为我从来没有找到一些工作的“残疾人”。输入元素的属性。还有一些'isContentEditable＆＃39;并且＆＃39;禁用＆＃39;属性，但无论输入状态是什么，它们总是假的。

因此，我仍然试图理解如何将这个非常基本的（jQuery！）作为AngularJs指令！欢迎任何提示！

提前致谢。

我当前 - 不工作！ - 代码（与一些jQuery函数混合，因为我找不到任何其他符合角度的方法来执行它）：

appDirectives.directive('inputGroup', function(){ 
    return { 
        restrict: 'C',
        link: function(element){            
            element.children('input:disabled').each(function(){
                    if($(this).val().length == 0){
                        $(this).parent('.input-group').remove();
                    }
                });     
        } 
    } ;
});

修改这里重要的是声明模型是异步检索的（通过承诺），而且，在评估指令时我没有它的值。因此，我想手表必须在模型上......但不知道如何做到这一点。

Answer 1

首先，请注意，将传递给指令的链接函数的第一个参数是scope，而不是element。更多信息：https://docs.angularjs.org/api/ng/service/$compile

按照为input-group创建指令的方法，这是一个应该按照您的意图执行的（粗略）版本。

app.directive('inputGroup', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      var input = element.find('INPUT'); // get a reference to the input element so we can query its attributes. 
      var inputModel = input.attr('ng-model'); // get the expression in the input's ng-model attribute
      var disabledExpression = input.attr('ng-disabled'); // get the expression in the input's ng-disabled attribute

      scope.$watch(function() {
          return scope.$eval(disabledExpression);
        }, function(value) {
        if (!scope.$eval(inputModel) && scope.$eval(disabledExpression)) {
          element.addClass('hidden');
        } else {
          element.removeClass('hidden');
        }
      });
    }
  };
});

HTML看起来像这样（与你的例子相同）：

<div class="input-group">
    <span class="input-group-addon">Field Label</span>
    <input ng-disabled="isDisabled" ng-model="someModel" />
</div>

演示：http://plnkr.co/edit/UArytXOLYyJhn70UodFe?p=preview

删除输入

在你的问题中，你谈到实际删除输入组，如果为空和禁用，而不是像我上面的代码中那样隐藏它。要删除而不是隐藏，可以将行element.addClass('hidden')替换为element.remove()，并删除else子句。

从表单中删除空字段和禁用字段的指令

1 个答案:

删除输入