I am trying to create dynamic rows based on button click. The rows have drop down boxes. The issue is when I add new row and select an option in the new row the options which I selected in previous rows are also changing, I mean the previous rows options are not binding properly.
My HTML code :
<div id="features" ng-controller="featuresCtrl">
<br>
<div class="row">
<div class="form-group col-md-6">
<table cellpadding="15" cellspacing="10">
<thead>
<tr>
<th style="text-align: center;">Feature</th>
<th style="text-align: center;">Type</th>
<th style="text-align: center;">Value</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr ng-repeat="r in rows">
<td>
<select ng-model="r.data.model" ng-options="option.name for option in data.availableOptions"
ng-change="getValues(r.data.model.name)">
<option value="">Select Feature</option>
</select>
</td>
<td>
<select ng-model="r.updateData.model" ng-options="option.name for option in updateData.availableOptions"
ng-change="getBinSet(r.updateData.model.name)">
<option value="">Select Type</option>
</select>
</td>
<td>
<select ng-model="r.binData.model" ng-options="option.name for option in binData.availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td ng-if="showAdd">
<div class="text-center">
<button ng-click="addRow()">Add</button>
</div>
</td>
<td ng-if="showAdd">
<div class="text-center">
<button ng-click="remove($index)">Remove</button>
</div>
</td>
</tr>
<tr>
<td></td>
<td style="align-self: center;">
<button style="align-self: center" ng-click="submitForm(rows)">Submit</button>
</td>
<td></td>
</tr>
</tbody>
</table>
<br>
</div>
My angular JS code :
'use strict';
var testControllers = angular.module('testControllers');
testControllers.controller('featuresCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout', 'NgTableParams',
function($scope, $route, $filter, $http, $location, $window, $timeout, NgTableParams) {
$scope.rows = [{}];
$scope.nrows = [];
$scope.showAdd = false;
$scope.addRow = function() {
$scope.rows.push({
});
};
$scope.remove = function(index) {
$scope.rows.splice(index, 1);
};
$scope.submitForm = function(rows) {
console.log("rows", rows);
};
$scope.data = {
model: null,
availableOptions: [
{ name: 'TestA'},
{ name: 'TestB'},
{ name: 'TestC'},
{ name: 'TestD'}
]
};
$scope.getValues = function (featureType) {
console.log("getValues", featureType);
$scope.showAdd = false;
if (featureType != null) {
$http.get('/getPropensityValues.do', {params: {'featureType': featureType}}).success(function (data) {
var test = [];
angular.forEach(data, function (item) {
test.push({name: item});
});
$scope.updateData = {
model: null,
availableOptions : test
};
});
}
};
$scope.getBinSet = function (featureType) {
console.log("getBinSet", featureType);
$scope.showAdd = true;
if (featureType != null) {
$scope.binData = {
model: null,
availableOptions: [
{name: '1'},
{name: '2'},
{name: '3'},
{name: '4'},
{name: '5'},
{name: '6_10'},
{name: '10_15'},
{name: '16_20'},
{name: '21_25'},
{name: '26_30'},
{name: '31_35'},
{name: '36_40'},
{name: '41_45'},
{name: '46_50'},
{name: '>50'}
]
};
}
};
}]);
Can some one tell me what I am doing wrong here ?
It should be like to this.
var app = angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.updatedData ={
selections:[{
row : [{ name:""}]
}
]
};
$scope.addRow = function(index){
$scope.index = 0;
var row = [];
var name = {name:""};
row.push(name);
if($scope.updatedData.selections.length <= index+1){
$scope.updatedData.selections.splice(index+1,0,{
row : [{ name:""}]
});
}
};
$scope.getValues = function(val){
if(val=== 'TestB') {
$scope.data1 = {
model: null,
availableOptions: [
{ name: 'TestA'},
{ name: 'TestC'},
{ name: 'TestD'}
]
};
}
else if(val=== 'TestA') {
$scope.data1 = {
model: null,
availableOptions: [
{ name: 'TestB'},
{ name: 'TestC'},
{ name: 'TestD'}
]
};
}
else if(val=== 'TestC') {
$scope.data1 = {
model: null,
availableOptions: [
{ name: 'TestA'},
{ name: 'TestB'},
{ name: 'TestD'}
]
};
}
else {
$scope.data1 = {
model: null,
availableOptions: [
{ name: 'TestA'},
{ name: 'TestB'},
{ name: 'TestC'}
]
};
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.updatedData.selections.splice(index,1);
if($event.which == 1)
$scope.updatedData1.selections.splice(index,1);
}
$scope.data = {
model: null,
availableOptions: [
{ name: 'TestA'},
{ name: 'TestB'},
{ name: 'TestC'},
{ name: 'TestD'}
],
availableOptions2: [
{ name: 'Test2A'},
{ name: 'Test2B'},
{ name: 'Test2C'},
{ name: 'Test2D'}
]
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<table>
<tr ng-repeat="d in updatedData.selections track by $index">
<td>
<select ng-model="updatedData.selections[$index].row[0].name"
ng-options="option.name as option.name for option
in data.availableOptions"
ng-change="getValues(updatedData.selections[$index].row[0].name)">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="updatedData.selections[$index].row[0].name2"
ng-options="option.name as option.name for option
in data1.availableOptions" >
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="updatedData.selections[$index].row[0].name3"
ng-options="option.name as option.name for option
in data.availableOptions2"
>
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow($index)" value="Add"
ng-show="$last">
</td>
</tr>
</table>
<pre>{{updatedData|json}}</pre>
</div>