javascript - 提前清除Angular UI Bootstrap中的$ viewValue

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

玩家选项已根据团队正确加载，但是问题是，单击鼠标时，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>

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

$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中可用。

最佳答案

要从控制器重置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

关于javascript - 提前清除Angular UI Bootstrap中的$ viewValue，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41127155/