12

我正在 AngularJS 中构建一个自动完成框。相关代码如下

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

我想知道当“标签”没有价值时显示建议列表的最佳方式是什么（即我想在用户按下向下键时显示所有标签。无需提及按键代码回答）。

4

2 回答 2

31

ng-show 适用于任何导致 bool 的表达式，因此您需要做的就是将“tag”替换为“tag === ''”，或者如果您的标签将是未定义的或为空的，则替换为等效的。

如果您只想在按下某个键时显示，我会创建另一个变量，当按下向下键时将其设置为 true 并检查它，例如

$scope.KeyPressed = false;
$scope.Tags = '';

$scope.ShowTags = function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

然后在你的div中：

<div ng-show="ShowTags()">

例如，请参见jsfiddle

如果您需要从 jquery 插件中更改任何变量，您可能需要使用

$scope.$apply()
于 2012-12-17T03:25:22.463 回答
15

我在建立自己的角度项目时遇到了这个问题。

当我做出接受的答案时，我发现我的浏览器的内存不断增加。如果您创建了角度范围方法“ShowTags()”，它将不断被轮询。您可以通过在此方法中设置断点来验证这一点，它将不断被命中。如果您检查任务管理器并显示运行您网站的浏览器，则内存会不断增加并且不会停止。

在我看来，范围函数应该只在使用事件触发器时使用：点击事件、更改事件、按键是一些例子。

显示或隐藏不是事件，所以这就是它被这样轮询的原因。

要修复并提供相同的功能，请将其转换为范围变量。

将html标签从：

<div ng-show="ShowTags()">

到

<div ng-show="ShowTags">

在你的控制器中：

$scope.KeyPressed = false;
$scope.Tags = '';

then create a watch event on what you want to watch for:

//initialize showtag when page loads
$scope.ShowTags = $scope.KeyPressed && $scope.Tags !== '';

//watch for any new changes on keypressed
$scope.$watch('KeyPressed', function (newValue, oldValue) {
     if (newValue && $scope.Tags !== '') {
         $scope.ShowTags = true;
     } else {
         $scope.ShowTags = false;
     }
}

//watch for any new changes on keypressed
$scope.$watch('Tags', function (newValue, oldValue) {
     if (newValue !== "" && $scope.KeyPressed) {
         $scope.ShowTags = true;
     } else {
         $scope.ShowTags = false;
     }
}

或者您可以更改为“watchCollection”而不是拥有多个手表，例如：

$watchCollection('[KeyPressed, Tags]', function (newValue) { }

但是有了这个，newValue 将是一个数组，您必须访问特定的索引才能获取正在监视的任何变量的 newValues。

like..newValue[0]是KeyPressed的值，newValue[1]是Tags的值

或者遵循公认的答案并尽量减少手表的数量：

$scope.TruthyVal= function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

$scope.$watch('TruthyVal', function (newValue, oldValue) {
     if (newValue) {
         $scope.ShowTags = true;
     } else {
         $scope.ShowTags = false;
     }
}

它查看 KeyPressed 和 Tags 的值，并更改 TruthyVal 的值。如果 TruthyVal 被改变，那么它就会进入被监视的逻辑。

于 2014-06-26T15:01:07.100 回答