Question

我有一个输入和一个标签列表。该列表包含在输入中连接到模型的ng-show定向。

  <div id="tag-search">
    <input type="text" ng-model="tagQuery" />
    <ul ng-show="tagQuery">
      <li ng-repeat="t in tags | filter:tagQuery">
        <button type="button">{{t.name}}</button>
      </li>
    </ul>
  </div>

与您一样，当输入为空时，列表不会显示。当您开始输入时，列表会弹出视图。

当用户点击页面上的任意位置时，我还要隐藏标记列表。所以我在页面的容器div上有一个ng-click指令。 ng-click在我的控制器中连接到此功能：

$scope.closeFormModals = function() {
  // What goes here to hide the tag list?
};

我尝试了三件事，但没有一件事隐藏标签清单：

$scope.tagQuery = false;
$scope.tagQuery = undefined;
angular.element("#tag-search input").val('');

JSFiddle

以下是包含所有代码的回购链接：

angular stuff

view

Answer 1

试试这个。

$scope.closeFormModels = function() {
  $scope.$apply(function(){
    $scope.tagQuery = false;
  });
};

Answer 2

答案是将$parent加到视图中引用的ng模型前面，因为ng-model引用的任何内容显然都会卡在隔离的范围内。

<div id="tag-search">
    <input type="text" ng-model="$parent.tagQuery" placeholder="Add tags"/>
    <ul ng-show="$parent.tagQuery" class="list-inline">
      <li ng-repeat="t in tags | filter:tagQuery">
        <button id="{{t.id}}" type="button" class="btn btn-default" ng-click="addTag(t)">{{t.name}}</button>
      </li>
    </ul>
  </div>

More info in this thread

特别感谢@stevuu带领我找到这个解决方案。

通过访问ng-show隐藏控制器中的元素

2 个答案: