Question

我在尝试找到解决此问题的方法时遇到了一些麻烦：

我有一个项目的重复项，这些项目需要通过数字下拉列表进行排序（我不需要通过dinamically进行排序，我只需要为每个项目分配一个值）。首先，我需要显示一个值为1到items.length;

的下拉列表

<div ng-repeat="item in items">
    <span>{{item.name}}</span>
    <span></span> <!-- Here I should display a dropdown with values from 1 to items.length -->
</div>

除此之外，如果我可以使它们之间的下拉值互斥，那就太棒了。例如，如果我为第一个项目的下拉列表选择“1”值，则“1”不应该是所有其他下拉列表中的选项。

这里有fiddle。

任何帮助？

谢谢！

Answer 1

我认为此代码可以解决您的问题

<div ng-app>
<div ng-controller="testCTRL">
    {{selectedItems}}
    <div ng-repeat="item in items">
        <span>{{item.name}}</span>
        <select ng-model="$parent.selectedItems[$index]">
            <option value="undefined"></option>
            <option ng-repeat="it in items" ng-show="itShouldBeShowed($index)" ng-value="$index">{{$index}}</option>
        </select>
    </div>
</div>

这里是JS

function testCTRL($scope) {
$scope.selectedItems = [undefined,undefined,undefined];
$scope.items = [{name: "a"},{name: "b"},{name: "c"}];
$scope.itShouldBeShowed = function(value){
    var found = false;
    $scope.selectedItems.forEach(function(item){
        if(item * 1 === value){
            found = true;
        }
    });
    return !found;
    };   
 }

这里有jsfiddle

Answer 2

您还可以使用示波器监视来查看选择了哪些项目：

HTML：

<div ng-app>
    <div ng-controller="testCTRL">
        <div ng-repeat="item in items">
            <span>{{item.name}}</span>
            <span>
                <select ng-model="modelValues[item.name]">
                    <option></option>
                    <option ng-repeat="value in items" ng-disabled="value.disabled">{{value.value}}</option>
                </select>
            </span>
        </div>

    </div>
</div>

JS：

function testCTRL($scope) {

    $scope.items = [{name: "a", value: 1, disabled: false},
                    {name: "b", value: 2, disabled: false},
                    {name: "c", value: 3, disabled: false}];

    $scope.modelValues = {};

    $scope.$watch('modelValues', function(newVal, oldVal){

            for(var i = 0; i < $scope.items.length; i++){
                $scope.items[i].disabled = false;

                angular.forEach($scope.modelValues, function(value, key) {
                    //Value/Key are strings, you cannot use the strict equality operator                  
                    if($scope.items[i].value == value){
                        $scope.items[i].disabled = true;
                    }
                });
            }
    }, true); // <-- objectEquality check. Expensive!
}

http://jsfiddle.net/sfj2e5ot/5/

在angularjs的ng-repeat中动态互斥下拉

2 个答案: