I have a row in a table which contains one dropdown and 2 input boxes. The user can add and remove multiple rows. The state which is selected in one row in the dropdown can't be selected in the other rows. For e.g If Delhi is selected in the 1st row and the user adds some other rows then Delhi should be disabled in all of them. Please let me know how to implement it. I have tried multiple solutions which were having dropdowns which are dependant on each other but here I am adding rows. Here is the Plunker link for my code:
http://plnkr.co/edit/o2NQFKitWB2ngdagr6zI?p=preview
HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h4 class="panel-title">Country
</h4>
</a>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="rettbl-format">
<div class="table-responsive">
<table class="table tbl inv exp table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" class="chkbx" name="main" data-ng-model="selectedAll" data-ng-click="selectAllInterSups()"/>
<label for="main"></label>
</th>
<th class="text-center">State</th>
<th class="text-center">Total Value</th>
<th class="text-center">Actual Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="objUnreg in interStateSup.unreg_details">
<th>
<input type="checkbox" class="chkbx" name="objUnreg_{{$index}}" data-ng-model="objUnreg.selected"/>
<label for="objUnreg_{{$index}}"></label>
</th>
<td>
<select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0">
<option value="">Select</option>
</select>
<span ng-show="myForm.stcode.$error.required"></span>
</td>
<td>
<input class="form-control formedit newinv currency" data-ng-model="objUnreg.txval"/>
</td>
<td>
<input class="form-control formedit newinv currency" data-ng-model="objUnreg.iamt" />
</td>
</tr>
</tbody>
</table>
<div class="row pull-right">
<button type="button" class="btn btn-primary" data-ng-click="addNewUnRegSups()">ADD</button>
<button type="button" class="btn btn-danger" data-ng-click="removeSelectedUnRegSups()">REMOVE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$scope.unregBlkStates = [{
"c": "35",
"n": "Andaman and Nicobar Islands",
"u": "Y"
}, {
"c": "37",
"n": "Andhra Pradesh",
"u": "N"
}, {
"c": "12",
"n": "Arunachal Pradesh",
"u": "N"
}, {
"c": "18",
"n": "Assam",
"u": "N"
}, {
"c": "10",
"n": "Bihar",
"u": "N"
}, {
"c": "04",
"n": "Chandigarh",
"u": "Y"
}, {
"c": "22",
"n": "Chhattisgarh",
"u": "N"
}, {
"c": "26",
"n": "Dadra and Nagar Haveli",
"u": "Y"
}, {
"c": "25",
"n": "Daman and Diu",
"u": "Y"
}, {
"c": "07",
"n": "Delhi",
"u": "N"
}, {
"c": "30",
"n": "Goa",
"u": "N"
}, {
"c": "24",
"n": "Gujarat",
"u": "N"
}, {
"c": "06",
"n": "Haryana",
"u": "N"
}, {
"c": "02",
"n": "Himachal Pradesh",
"u": "N"
}, {
"c": "01",
"n": "Jammu and Kashmir",
"u": "N"
}, {
"c": "20",
"n": "Jharkhand",
"u": "N"
}, {
"c": "29",
"n": "Karnataka",
"u": "N"
}, {
"c": "32",
"n": "Kerala",
"u": "N"
}, {
"c": "31",
"n": "Lakshadweep",
"u": "Y"
}, {
"c": "23",
"n": "Madhya Pradesh",
"u": "N"
}, {
"c": "27",
"n": "Maharashtra",
"u": "N"
}, {
"c": "14",
"n": "Manipur",
"u": "N"
}, {
"c": "17",
"n": "Meghalaya",
"u": "N"
}, {
"c": "15",
"n": "Mizoram",
"u": "N"
}, {
"c": "13",
"n": "Nagaland",
"u": "N"
}, {
"c": "21",
"n": "Odisha",
"u": "N"
}, {
"c": "34",
"n": "Puducherry",
"u": "N"
}, {
"c": "03",
"n": "Punjab",
"u": "N"
}, {
"c": "08",
"n": "Rajasthan",
"u": "N"
}, {
"c": "11",
"n": "Sikkim",
"u": "N"
}, {
"c": "33",
"n": "Tamil Nadu",
"u": "N"
}, {
"c": "36",
"n": "Telangana",
"u": "N"
}, {
"c": "16",
"n": "Tripura",
"u": "N"
}, {
"c": "09",
"n": "Uttar Pradesh",
"u": "N"
}, {
"c": "05",
"n": "Uttarakhand",
"u": "N"
}, {
"c": "19",
"n": "West Bengal",
"u": "N"
}];
var emptyObj = {
'pos': 0,
'txval': 0.0,
'iamt': 0.0
};
$scope.interStateSup = {
'unreg_details': [angular.copy(emptyObj)],
};
$scope.goToPage = function (path) {
$location.path(path);
};
$scope.selectedAll = false;
$scope.selectAllInterSups = function () {
angular.forEach($scope.interStateSup.unreg_details, function (obj) {
obj.selected = $scope.selectedAll;
});
};
$scope.addNewUnRegSups = function () {
$scope.interStateSup.unreg_details.push(angular.copy(emptyObj));
};
$scope.removeSelectedUnRegSups = function () {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.interStateSup.unreg_details, function (obj) {
if (obj.selected === undefined || (obj.selected !== undefined && !obj.selected)) {
newDataList.push(obj);
}
});
$scope.interStateSup.unreg_details = newDataList;
};
Hard to say whether it's the best solution but it works. You need to create a filter (specific to your data):
app.filter('exclude', function() {
return function(list,currentModel,selected){
var selectedLength = selected.length;
var out = [];
angular.forEach(list,function(listItem,index){
var add = true;
for (var index = 0; index < selectedLength; index++) {
if(selected[index].pos !== currentModel && selected[index].pos === listItem.c){
add = false;
break;
}
}
if(add){
out.push(listItem);
}
});
return out;
}
});
HTML:
<select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates|exclude:objUnreg.pos:interStateSup.unreg_details" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0">
<option value="">Select</option>
</select>