Question

在JSFiddle中有一个动态添加的下拉文件。第一个选中的值不应该显示在第二个添加的下拉列表中。所以我不会有重复的问题。如何在angularjs中实现此功能。

 <select ng-model="personalDetail.fname" ng-repeat="x in names">
</select
     $scope.names = ["Emil", "Tobias", "Linus"];

我想限制下拉值完成后动态添加新行。

Answer 1

每个下拉列表都必须根据之前的选择

跟踪可用的名称

将attendees声明移至控制器顶部

$scope.names

然后向$scope.names = ["Emil", "Tobias", "Linus"];个对象添加names属性，此属性将用于根据以前的选择跟踪可用的名称

personalDetail

现在，您可以修改addNew函数，以便在添加下拉列表时设置正确的值数

$scope.personalDetails = [
{
    'names':$scope.names
}];

还记得更新ng-repeat以使用你的新名字personalDetail.names属性

$scope.addNew = function(){
    $scope.personalDetails.push({ 
        'fname': "", 
        'lname': "",
        'email': "",
        // Make a copy of the values set for the previous drop down
        'names': $scope.personalDetails[$scope.personalDetails.length - 1].names.slice() 
        });

        // Determine the value of the previous selected name
        var previousSelectedName = $scope.personalDetails[$scope.personalDetails.length - 2].fname;

        // Get the index of the previous selected name     
        var index = $scope.personalDetails[$scope.personalDetails.length - 1].names.indexOf(previousSelectedName);

        // Remove the name from the valid names list
        if(index > -1){
            $scope.personalDetails[$scope.personalDetails.length - 1].names.splice(index, 1);
        }
    }
}

以下是新的JSFiddle演示此

请注意，我没有处理没有可供选择的名字的情况。但这种情况应该很容易处理。

Answer 2

请找到以下解决方案。我想它可以解决你的问题。

＆＃13;

var app = angular.module("myapp", []);
        app.controller("ListController", ['$scope', function ($scope) {
            $scope.personalDetails = [{
                'fname': 'Muhammed',
            }];

            $scope.names = ["Muhammed", "Emil", "Tobias", "Linus"];

            $scope.namesTemp = ["Muhammed", "Emil", "Tobias", "Linus"];

            $scope.addNew = function (personalDetail) {

                if (personalDetail != undefined && personalDetail.fname != undefined) {
                    var index = $scope.namesTemp.indexOf(personalDetail.fname);    // <-- Not supported in <IE9
                    if (index !== -1) {
                        $scope.namesTemp.splice(index, 1);
                    }

                    $scope.personalDetails.push({
                        'fname': "",
                        'lname': "",
                        'email': "",
                    });
                }
            };
            
             $scope.remove = function (index,personalDetail) {

                if (personalDetail != undefined && personalDetail.fname != undefined) {
                   
                        $scope.namesTemp.push(personalDetail.fname);
                   
                    if (index !== -1) {
                        $scope.personalDetails.splice(index, 1);
                    }

                }
            }
        }]);

＆＃13;

.btn-primary{
    margin-right: 10px;
}
.container{
  margin: 20px 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="ListController">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Firstname</th>
                                </tr>
                            </thead>
                            <tbody ng-repeat="personalDetail in personalDetails">
                                <tr>

                                    <td>
                                        <select ng-model="personalDetail.fname" ng-options="x for x in names" ng-if="!$last" disabled></select>
                                         <select ng-model="personalDetail.fname" ng-options="x for x in namesTemp" ng-if="$last"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove($index,personalDetail)" value="Remove">
                                            <input type="button" class="btn btn-primary addnew pull-right" value="Add New" ng-click="addNew(personalDetail)" ng-if="$last">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

如何限制下拉值

2 个答案: