javascript - 在angular-ui中手动输入文本

我的问题来自所选的答案here

<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)"

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

我该如何使用它来调用该函数，却又完成了任务，就像它在引用的答案中的工作方式一样？

最佳答案

我建议您这样做：


为了提高性能，请删除repeat="hero in getSuperheroes($select.search) | filter: $select.search"，因为如果您的数据不变，则每次执行getSuperheroes时（无论var $digest是否更改）都会触发（无论如何）函数newSupes。在getSuperheroes中）（那是wahat正在发生！）。而是放入（例如）repeat="hero in myHeroes"，然后在您的getSuperheroes函数中执行以下操作：

$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 var，然后在视图中刷新它。
添加属性refresh-delay="500"（500只是一个示例，请放置满足您需要的任何内容）。这将使搜索延迟几毫秒。当您不想立即开始搜索时，此功能很有用。例如，如果用户要搜索“超人”并且在少于500毫秒内键入“ Sup”，则搜索将从字符串“ Sup”开始。如果未设置该属性，则搜索将执行3次（一次为“ S”，另一次为“ Su”，第三次为“ Sup”）


PS：

-如果要最初获取具有某些值的ui-select，则必须在控制器启动时调用getSuperheroes函数。

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

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


How exactly does the AngularJS Digest Loop work?
Why do i have to call $scope.$digest() here?
Angular $scope.$digest vs $scope.$apply
$apply vs $digest in directive testing