Question

我有多个选择框，我使用角度JS。每个选择框都需要具有不同的选定值。到目前为止，我所看到的所有内容都具有共享相同选定值的元素。为了实现这一点，使用了范围。因为我可能有数百次跌落......实际上是数千......这里的正确方法是什么？为每个人创建一个范围？尝试让每个选择框都有一个变异的范围？

这是一个我有jsfiddle的例子。

非常感谢任何帮助。
感谢


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

Answer 1

不确定我是否已经找到了你想要的东西。据我了解，您需要每个选择框具有不同的值。因此，您需要将每个选择框绑定到不同的变量。

<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 count变量。

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/ 如果我误解了你的问题，请随时纠正我。

Answer 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'}
    ];
}

在angularJS中具有不同选定值的多个选择框

2 个答案: