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

Question

我的问题来自所选答案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)"

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

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

Answer 1

我建议您这样做:

• 为了提高性能，请删除 repeat="hero in getSuperheroes($select.search) | filter: $select.search"，因为如果您的数据不会更改函数 getSuperheroes 将会在每次执行 $digest 时被触发(无论 var newSupes 在 getSuperheroes 中是否改变) code>) (这就是现在正在发生的事情!)。相反，放入(例如)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 然后它将在 View 中刷新。
• 添加属性refresh-delay="500"(500只是一个示例，根据您的需要添加任何内容)。这将延迟搜索毫秒数。当您不想立即开始搜索时，这非常有用。例如，如果用户想要搜索“Superman”并且她/他在不到 500 毫秒内键入“Sup”，则搜索将从字符串“Sup”开始。如果您不设置该属性，搜索将执行 3 次(一次搜索“S”，另一次搜索“Su”，第三次搜索“Sup”)

PS:

-- 如果您想获取最初具有某些值的 ui-select，您必须在 Controller 启动时调用 getSuperheroes 函数.

-- 您可能需要声明 $scope.myHeroes = [];在 Controller 的开头(这取决于您的 Controller 实现)。

-- 您可能想在 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