清除 Angular UI Bootstrap typeahead 上的 $viewValue

Question

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

播放器选项已根据团队正确加载，但问题是点击时提前输入未显示选项 - 我想我可能运行与 $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>

寻找球队变化然后重置球员选项和选择值的控制器：

$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

要从控制器重置 players 预输入值，您可能需要这样的东西：

 $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

清除 Angular UI Bootstrap typeahead 上的 $viewValue

Clearing the $viewValue on Angular UI Bootstrap typeahead

javascript

angularjs

angular-ui-bootstrap