Question

是否可以在同一个选择下拉列表中同时使用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);

有人有什么想法吗？感谢

Answer 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应该在您的范围内。

Angular在选择下拉菜单中一起使用ng-bind-html和ng-model？

1 个答案: