Here is the JSFiddle.
In the JSFiddle there is a drop down filed that will add dynamically.The first selected value should not display in the second added dropdown.So I will not have duplicates problem. How can I achieve this functionality in angularjs.
<select ng-model="personalDetail.fname" ng-repeat="x in names">
</select
$scope.names = ["Emil", "Tobias", "Linus"];
and I want to restrict adding the new row dynamically when the drop downs values are completed.
Each drop down will have to track the available names based on the selections made previously
Move the $scope.names declaration to the top of your controller
$scope.names = ["Emil", "Tobias", "Linus"];
Then add a names property to your personalDetail objects, this property will be used to track the available names based on previous selections
$scope.personalDetails = [
{
'names':$scope.names
}];
Now you can modify your addNew function to set the correct number of values when adding a drop down
$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);
}
}
}
Also remember to update the ng-repeat to make use of your new names personalDetail.names property
<tr ng-repeat="personalDetail in personalDetails">
<td>
<select ng-model="personalDetail.fname" ng-options="x for x in personalDetail.names">
</select>
</td>
</tr>
Here is the new JSFiddle demonstarting this
Please note that I did not handle the case where there are no names available to choose from. But this case should be pretty easy to handle.
Please find below solution. I guess it solves your problem.
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);
}
}
}
}]);.btn-primary{
margin-right: 10px;
}
.container{
margin: 20px 0;
}<!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>