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隐藏属性

玉

1 个答案: