从json的另一个多个下拉列表中不应出现已选择的angularjs值 [英] angularjs already selected value should not apprear in another multiple dropdowns from json

问题描述

我需要你的帮助. 我正在使用json中的ng-repeat实现多个下拉列表.我希望一旦在一个下拉列表中选择了值，就不应在另一个下拉列表中出现.我是angularjs的新手.这是我的json.我要使用选定的值columnindex下拉菜单中的数据".

I need your help. I'm implementing multiple dropdowns using ng-repeat from json. And I want that once value is selected in one dropdown it should not appear in another dropdowns. i'm new in angularjs. here is my json. I want "data" in drop down with selected value columnindex.

$scope.records = [
    {
        "userId": "10",
        "fisrtname": "Unnati",
        "lastName": "Chauhan",
        "dateVal": "22-05-2016",
        "columnindex": "1",
        "data": [{value: 1, text: 'USERID'},
            {value: 2, text: 'FIRSTNAME'},
            {value: 3, text: 'LASTNAME'},
            {value: 4, text: 'DOB'}]
    },
    {
        "userId": "20",
        "fisrtname": "Ranju",
        "lastName": "Shinde",
        "dateVal": "21-05-2016",
        "columnindex": "2",
        "data": [{value: 1, text: 'USERID'},
            {value: 2, text: 'FIRSTNAME'},
            {value: 3, text: 'LASTNAME'},
            {value: 4, text: 'DOB'}]
    },
    {
        "userId": "30",
        "fisrtname": "Smruti",
        "lastName": "Modi",
        "dateVal": "20-05-2016",
        "columnindex": "3",
        "data": [{value: 1, text: 'USERID'},
            {value: 2, text: 'FIRSTNAME'},
            {value: 3, text: 'LASTNAME'},
            {value: 4, text: 'DOB'}]
    }];

我的html代码是

 <div ng-controller="multipleDropDown">
        <div ng-repeat= "us in records" >

            <select ng-model="us.columnindex" ng-options="item.value as item.text for item in us.data|arrayDiff:us.data:item.value">
            </select>
        </div>
    </div>

推荐答案

您需要在下拉菜单元素中添加以下代码，以避免在ng-model值更改期间对所有三个下拉菜单进行递归调用.

you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.

ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"

还有一个函数可以更新您的$scope.records数组的data对象.请查看此小提琴.我想这就是您想要的具体东西.

Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.

这篇关于从json的另一个多个下拉列表中不应出现已选择的angularjs值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！