Angularjs从object中选择多个选项

Question

尝试在angularjs中选择与对象值有关的多个选项

这是一个代码:

myapp.controller('myctrl', [
        '$scope',
        function ($scope) {
            $scope.query = {
                Statuses: {
                    Draft: true,
                    Live: true,
                    Pending: true,
                    Archived: false,
                    Deleted: false
                }
            };


        }
    ]);?

和HTML

<div ng-controller="myctrl">
<select multiple>
    <option value="Draft" ng:model="query.Statuses['Draft']">Draft</option>
    <option value="Pending" ng:model="query.Statuses.Pending">Pending</option>
    <option value="Live" ng:model="query.Statuses.Live">Live</option>
    <option value="Archived" ng:model="query.Statuses.Archived">Archived</option>
    <option value="Deleted" ng:model="query.Statuses.Deleted">Deleted</option>
</select>

    {{query | json}}
</div>

(非)jsfiddle上的工作样本

http://jsfiddle.net/andrejkaurin/h9fgK/

Answer 1

使用状态模型($ scope.statuses)和ng-options迭代它们:

function MyCtrl($scope) {
    $scope.statuses = [ 'Draft', 'Pending', 'Live', 'Archived', 'Deleted' ];
    $scope.selectedStatuses = [ 'Pending', 'Live' ];
}?

.

<select ng-model="selectedStatuses" multiple ng-options="status for status in statuses">
</select>

Answer 2

你试图使用像复选框列表这样的选择倍数,这有点奇怪.多选输出数组.你不能把ng-model放在这样的选项标签上,它会在选择本身上进行.因此,由于select将输出一个值数组,因此您需要遍历这些值并更新范围中的节点.

这是一个演示代码的插件

这是代码:

JS

function inArray(x, arr) {
  for(var i = 0; i < arr.length; i++) {
    if(x === arr[i]) return true;
  }
  return false;
}

app.controller('MainCtrl', function($scope) {
   $scope.query = {
                Statuses: {
                    Draft: true,
                    Live: true,
                    Pending: true,
                    Archived: false,
                    Deleted: false
                }
            };
  $scope.selectionsChanged = function(){
    for(var key in $scope.query.Statuses) {
      $scope.query.Statuses[key] = inArray(key, $scope.selectedValues);
    }
  };
});

HTML

<select multiple ng-model="selectedValues" ng-change="selectionsChanged()">
    <option value="Draft" ng-selected="query.Statuses.Draft">Draft</option>
    <option value="Pending" ng-selected="query.Statuses.Pending">Pending</option>
    <option value="Live" ng-selected="query.Statuses.Live">Live</option>
    <option value="Archived" ng-selected="query.Statuses.Archived">Archived</option>
    <option value="Deleted" ng-selected="query.Statuses.Deleted">Deleted</option>
</select>
<br/>
    {{query | json}}

我希望有所帮助.

Answer 3

这是肉体解决方案的替代方案

app.controller('MainCtrl', function($scope) {

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

并选择

<select multiple ng:model="query.Statuses" >
      <option value="Draft">Draft</option>
      <option value="Pending">Pending</option>
      <option value="Live">Live</option>
      <option value="Archived">Archived</option>
      <option value="Deleted">Deleted</option>
  </select>
  {{query | json}}

工作样本在这里:

http://plnkr.co/edit/bCLnOo

Answer 4

只是要指出,IMO多个选择元素是一个UI交互邪恶.触摸任何东西,而不记得按住修改键,一些用户不知道,你丢失了整个选择.特别糟糕的是,如果有足够的选项,它们并非全部可见,那么你甚至不能告诉你何时放弃现有的选择.多个复选框是表示相同可能选项和当前选择的更好方法.容器的价值可以滚动,有效类似于多选项,而不是大小.(我不知道答案......)