javascript - 清除 Angular UI Bootstrap typeahead 上的 $viewValue

Question

我有一个表单，其中的字段相互依赖，使用 UI Bootstrap 显示.从 bootstrap typeahead 中选择一个团队然后填充玩家列表，然后可以在第二个 typeahead 中选择。当用户更改球队时，我会重新加载球员列表并清除当前选择的球员值。

播放器选项已根据团队正确加载，但问题是点击时提前输入未显示选项 - 我想我可能会遇到 $viewValue 处于奇怪状态且不匹配任何选项的情况现有选项。如果我键入的字母恰好与我未见过的选择之一相匹配，那么我将获得匹配值，并清除已键入的任何内容以恢复完整列表。

我希望完整列表在第一次点击时可用 - 我怀疑我需要正确重置 $viewValue，并且我尝试过尝试 $setViewValue 和 $render( ) 在播放器模型上，但没有得到任何结果。

<div class="options">
Team: <input type="text" 
          name="team"
          placeholder="Select team"
          ng-model="selectedTeam" 
          uib-typeahead="team as team.name for team in league | filter:$viewValue" 
          typeahead-editable="false"
          typeahead-min-length="0"
          class="form-control">
</div>

<div class="options">
<input type="text" 
        name="player"
        placeholder="Select player"
        ng-model="selectedPlayer" 
        uib-typeahead="player as player.name for player in players | filter:$viewValue" 
        typeahead-editable="false"
        typeahead-min-length="0"
        class="form-control">
</div>

寻找球队变化然后重置球员选项和选择值的 Controller :

$scope.$watch('selectedTeam.id', function(newTeamID) {

    // clears any currently selected player ng-model
    $scope.selectedPlayer = null;

    if (!newTeamID)
    {
      return;
    }

    // sets up the list of available players
    $scope.pullPlayers(newTeamID);

});

完整的 plunkr 可用 here .

Answer 1

要从 Controller 重置 players typeahead 值，您可能需要这样的东西:

 $scope.$watch('selectedTeam.id', function(newTeamID) {
    if (!newTeamID)
    {
       $scope.players = [];
       $scope.teamForm.player.$setViewValue('');
       $scope.teamForm.player.$render();
       return;
    }

    // sets up the list of available players
    $scope.pullPlayers(newTeamID);
  });

这是一个forked plunker