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>

寻找团队变化的控制器，然后重置播放器选项和所选值：

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

});

Full 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

1 个答案: