Angular 在选择下拉列表中一起使用 ng-bind-html 和 ng-model？答案

【问题标题】：Angular using ng-bind-html and ng-model together in select dropdown?Angular 在选择下拉列表中一起使用 ng-bind-html 和 ng-model？
【发布时间】：2015-04-15 11:06:53
【问题描述】：

是否可以在同一个下拉列表中同时使用 ng-bind-html 和 ng-model？在我的应用程序中，我有一个使用 ng-bind-html 填充的选择下拉列表（工作正常），但是当我尝试使用 ng-model 将下拉列表的值绑定到 $scope 时，它不会更新范围使用下拉列表的值，它与我的控制器中的原始声明保持相同。这是它的样子：

<select id="newNumOfPlayers" ng-bind-html="compiledSelect" ng-model="newNumOfPlayers"></select>

我在控制器的开头声明我的变量

$scope.newNumOfPlayers = 0;

这里是我填充选择字符串的地方

$scope.compiledSelect = "";
      var contentSelectString = "";
      for (i = 1; i <= data[0].noOfPlayersNeeded; i++) { 
          contentSelectString += "<option value="+i+">"+i+"</option>";
      }
     $scope.compiledSelect = $sce.trustAsHtml(contentSelectString);

但这总是记录为 0

console.log("new number "+$scope.newNumOfPlayers);

有人有什么想法吗？谢谢

【问题讨论】：

您能否解释一下您的流程应该如何工作，以便我们使用ng-options 提出更好的方法，因为如果没有这些，您将不得不编写一个新指令来监视您动态生成的@ 987654326@ 所以它会传播到你的模型中。我特别感兴趣 data、data[0].noOfPlayersNeeded 和 newNumOfPlayersNeeded 的相关性。

标签： angularjs select angularjs-scope angular-ngmodel

【解决方案1】：

您有什么理由使用ng-bind-html 而不是ng-options？

这是一种相当简洁的方法，只需输入数字即可：

首先，我们创建一个过滤器，该过滤器创建一个数组，其数字等于您的阈值（需要的玩家数量）

app.filter('range', function() {
  return function(input, min, max) {
    min = parseInt(min); //Make string input int
    max = parseInt(max);
    for (var i=min; i<=max; i++)
      input.push(i);
    return input;
  };
});

接下来我们使用ng-options 结合我们的过滤器来填充选择

<select ng-model="newNumOfPlayers" ng-options="n for n in [] | range:1:noOfPlayersNeeded"></select>

现在newNumberOfPlayers 应该已正确更新，并且范围过滤器不会污染您的控制器，并且可以在您需要的任何地方使用。请注意，noOfPlayersNeeded 应该在您的范围内。

【讨论】：