在 angular-ui 中手动输入文本

Question

我的问题来自所选答案

<ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
<div ng-bind="hero"></div>

完美适用于：

$scope.getSuperheroes = function(search) {
  var newSupes = $scope.superheroes.slice();
  if (search && newSupes.indexOf(search) === -1) {
    newSupes.unshift(search);
  }
  return newSupes;
}

但是，当我在 $scope.superheroes 上设置断点时，我看到它被调用的次数与我的数据一样多。数据非常大。它是从 $http.get() 请求中获取的，我正在处理不立即将数据加载到文本框中的问题。

但是，在我真正开始在文本框中输入任何内容之前，我不想调用它。我尝试使用

调用 getSuperheroes

on-select="getSuperheroes($select.search)"

类似地

refresh="getSuperheroes($select.search)"

但它们无助于允许手动输入数据。

我用什么来调用该函数并完成任务，就像它在参考答案中的工作方式一样？

Answer 1

我建议你这样做：

为了提高性能去掉 repeat="hero in getSuperheroes($select.search) | filter: $select.search"，因为如果你的数据没有改变，函数 getSuperheroes 将在每次执行 $digest 时触发（无论如何）（无论 getSuperheroes 中的 var newSupes 是否更改）（这就是现在正在发生的事情！）。取而代之的是（例如） repeat="hero in myHeroes" 然后在你的 getSuperheroes func 中这样做：

$scope.getSuperheroes = function(search) {
    var aux = $scope.superheroes.slice();
    if (search && aux.indexOf(search) === -1) {
        aux.unshift(search);
    }
    $scope.myHeroes = aux;
}

保留 refresh="getSuperheroes($select.search)"，这将通过调用 getSuperheroes 搜索新值，这将更新 $scope.myHeroes 变量，然后将在视图中刷新。
添加属性 refresh-delay="500"（500只是一个例子，随便填什么）。这将延迟搜索那个毫秒数。当您不想立即开始搜索时，这很有用。例如，如果用户想要在不到 500 毫秒内搜索 "Superman" 和 she/he 键入 "Sup"，则搜索将从字符串 "Sup" 开始。如果您不设置属性搜索将执行 3 次（一次用于 "S"，另一次用于 "Su"，第三次用于 "Sup"）

PS:

-- 如果你想得到 ui-select 初始 一些值 ，你必须在控制器启动时调用 getSuperheroes 函数。

-- 你可能需要声明$scope.myHeroes = [];在你的控制器的开头（这取决于你的控制器实现）。

-- 您可能想在 AngularJS 官方文档上阅读有关 $digest 的更多信息，在 SO 上有一些相关帖子：

Why do i have to call $scope.$digest() here?
$apply vs $digest in directive testing

在 angular-ui 中手动输入文本

Manually entering text in angular-ui

javascript

angularjs

angular-ui

angular-ui-select