使用 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

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

请注意，这里的主要区别在于我们不能 "hide" 属性，因为隐藏实际上是

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中，你可以放真假表达式，在hidden-attribute中你可以选择要删除的属性

使用 ng-hide 隐藏属性

Hide an attribute with ng-hide

angularjs

angularjs-directive

pug

翡翠