2

複数の選択ボックスがあり、angular JS を使用しています。各選択ボックスには、異なる選択値が必要です。これまでに見たものはすべて、選択された同じ値を共有する要素を持っています。これを達成するために、スコープが使用されます。私は何百ものドロップダウンを持つ可能性があるので...実際には何千もの...ここで正しいアプローチは何ですか? それぞれのスコープを作成しますか? 各選択ボックスで変化するスコープを 1 つ持つようにしてください。

これは私が持っているものの例ですjsfiddle。

どんな助けでも大歓迎です。
ありがとう


function MyCntrl($scope) {
$scope.colors = [
    {name:'black'},
    {name:'red'},
    {yellow:'yellow'}
]
$scope.isSel = $scope.colors[1];
}
4

2 に答える 2

2

各選択ボックスを独自のスコープにバインドする必要があります。同じ isSel ではなく、それぞれを新しいオブジェクトにバインドして手動で行うか、次のように ng-repeat を使用できます。

http://jsfiddle.net/zmU8R/9/

html:

<div ng-app="">
  <div ng-controller="MyCntrl">
      <div ng-repeat="control in controls">
          <select ng-model="control.isSel" ng-options="c.name for c in colors"></select><br />
      </div>
      <hr />
      <div ng-repeat="control in controls">
          {{control.id}}: {{control.isSel}}
      </div>
  </div>
</div>

脚本：

function MyCntrl($scope) {
    $scope.controls = [
        {id: 1, isSel:null},
        {id: 2, isSel:null},
        {id: 3, isSel:null}
    ];
    $scope.colors = [
        {name:'black'},
        {name:'red'},
        {name:'yellow'}
    ];
}
于 2013-02-10T13:01:49.603 に答える
2

あなたが正確に何を望んでいるのか、私にはわかりません。私が理解している限り、各選択ボックスには異なる値が必要です。したがって、各選択ボックスを異なる変数にバインドする必要があります。

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <hr/>
    <div ng-repeat="n in [] | range: selectionsCount">
        <select ng-model="selectedValues[$index]" ng-options="c.name for c in colors"></select>
    </div>
    {{ selectedValues }}
  </div>
</div>

より明確な例として、ここで selectboxes カウント変数を作成しました。

angular.module('myApp', [])
    .controller('myCtrl', function ($scope) {
        $scope.colors = [
            {name: 'black'},
            {name: 'red'},
            {name: 'yellow'}
        ];
        $scope.selectedValues = [];
        $scope.selectionsCount = 5;
    })
    .filter('range', function () {
        return function(input, total) {
            total = parseInt(total);
            for (var i=0; i<total; i++)
                input.push(i);
            return input;
        };
    });

ここでテストできます: http://jsfiddle.net/zmU8R/7/ 質問を誤解した場合は、遠慮なく訂正してください。

于 2013-02-08T16:25:24.417 に答える