12

オブジェクト値に関して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での（非）動作サンプル</ p>

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

4

4 に答える 4

14

ステータスのモデル（$ 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>
于 2012-11-20T19:48:36.263 に答える
12

チェックボックスリストのように複数選択を使用しようとしていますが、これは少し奇妙です。複数選択は配列を出力します。そのようなオプションタグに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}}

それがお役に立てば幸いです。

于 2012-11-20T15:10:12.570 に答える
6

これは、ブレッシュソリューションの代替手段です

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

于 2012-11-20T16:36:17.130 に答える
6

指摘するだけで、IMOの複数の選択要素はUIの相互作用の悪です。一部のユーザーが知らない修飾キーを押し続けることを忘れずに何かに触れると、選択全体が失われます。すべてが表示されないほど十分なオプションがある場合は特に悪いですが、既存の選択をいつ削除するかさえわかりません。複数のチェックボックスは、同じ可能なオプションと現在の選択を表すためのはるかに優れた方法です。それらのコンテナの価値は、スクロール可能にすることができ、サイズよりも多くのオプションを備えた複数選択に効果的に似ています。（私が知っている答えではありません...）

于 2012-12-11T18:07:42.730 に答える