Javascript 在Angular UI引导程序typeahead上清除$viewValue

我有一个表单，其中的字段相互依赖，使用。从引导型typeahead中选择一个团队，然后填充一个玩家列表，然后在第二个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>

---

可以使用完整的plunkr。

要从控制器中重置

播放器

提前键入值，您可能需要如下内容：

 $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);
  });

---

这里有一个

在我简化的plunkr示例中肯定有效。现在尝试将它应用到稍微复杂一点的实际代码中（驱动两个列表——一个有效，另一个异常）。现在深入研究一下。我有两个相关列表（比如“球员”和“教练”），当清除主要选项（团队）时，它也会导致其中一个Typeahead与之前的选项一起打开（尽管ng重复显示选项已被清除，如您所建议的）。我无法让它在plunkr中复制它-如果我这样做，我会问一个新问题。但这解决了我原来的问题-显然，在清除驱动程序列表时使用$setViewValue比在设置新值时效果更好。

 $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);
  });