使用 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 中，您可以放置​​ true false 表达式，在 hide-attribute 中您可以选择要删除的属性