Question

这看起来像是一见钟情的东西，但这样做的主要方法是使用optgroups和颜色很好地设计选择框。

以下是标记的简化示例：

<select ng-model="query.Statuses" multiple="" ng-bind-html="to_trusted(opts)">
</select>

和控制器：

app.controller('MainCtrl', function($scope, $sce) {
  $scope.to_trusted = function(html_code) {  return $sce.trustAsHtml(html_code); };

  $scope.opts = '<option value="Draft">Draft</option>'+
      '<option value="Pending">Pending</option>'+
      '<option value="Live">Live</option>'+
      '<option value="Deleted">Deleted</option>';

  $scope.query = {
      Statuses: ["Pending","Live"]
   };
});

以下是plunker： http://plnkr.co/edit/Kv5xkl1KQVxgwGfnVpeZ?p=preview

如您所见，未选择所需的两个选项。

Answer 1

为什么不在ng-repeat中运行你的选项？

 $scope.opts = ['Draft', 'Live']; // etc

然后在你的HTML中

<option value="opt" ng-repeat="opt in opts">{{opt}}</option>

不使用ng-model，而是设置on blur或on change事件，触发函数以根据需要操作范围数组

Answer 2

在控制器中设置HTML代码不是一个好习惯。您必须分离视图和控制器代码。尝试在视图中使用ng-repeat包含模板选项标记，并使用javascript对象或关联数组在控制器中设置选项。

您也可以在select标签中使用ng-options，如下所述：https://docs.angularjs.org/api/ng/directive/select

Answer 3

而不是使用ng-bind-html或ng-repeat为什么不坚持AngularJS如何使用select ng-option指令进行操作？

<强> FORKED DEMO

<强> HTML

<select ng-model="query.Statuses" multiple
      ng-options="status for status in statuses"></select>

<强> JAVASCRIPT

app.controller('MainCtrl', function($scope) {
  $scope.statuses = ['Draft', 'Pending', 'Live', 'Archived', 'Deleted'];
  $scope.query = { Statuses: ["Pending","Live"] };
});

或者，如果您希望有一个复杂的设置选项，其中您需要一些样式或禁用选项，那么您可以同时使用ng-repeat和ng-selected。

<强> DEMO

<强> HTML

<select ng-model="query.Statuses" multiple>
  <option ng-repeat="status in statuses" value="{{status}}" ng-bind="status"
    ng-selected="query.Statuses.indexOf(status) >= 0"></option>
</select>

当使用ng-bind-html时，Angularjs选择框不反映基础ng模型

3 个答案: