用ng-hide隐藏属性

Question

我使用一个输入字段值属性来显示用户在我的应用程序的SERP中输入的查询。我想隐藏在未定义结果的页面上查询的值。是否可以使用ng-show来隐藏一个属性，而不是整个元素？

玉石

    div(ng-controller="SearchCtrl", class="header-search-form")
      form(id="search-form-homepage" class="input-group input-lg")
        input(type="search",
        ng-enter="doSearch(query.term)",
        ng-hide="query.term === 'undefined'",
        ng-model="query.term",
        class="form-control header-search-result",
        value="#{data.query}")

Answer 1

您必须为此任务创建自己的指令。作为一个示例- plnkr，我创建了一个将删除占位符属性的指令。

注意这里的关键区别在于我们不能“隐藏”属性，因为隐藏实际上是

display: 0; 

我们只需移除或添加它们。

app.directive('attrHide', function(){
  return {
    restrict: 'A',
    scope: {
      attrHide: '='
    },
    link: function(scope, elm, attr){
      var targetAttr = attr.hiddenAttribute;
      var saveAttr = attr[targetAttr] || '';

      scope.$watch('attrHide', function(newVal){
        if (newVal){
          elm.removeAttr(targetAttr);
        } else {
          elm.attr(targetAttr,saveAttr);
        }
      })
    }
  }
})

在您可以拥有的标记中

<input  ng-model="target"/>
<input placeholder="hello" hidden-attribute="placeholder" attr-hide="target=='hello'"/>

在这里，在attr-hide中，您可以放置真正的false表达式，而在隐藏属性中，您可以选择要删除的属性。