I am unable to populate list on clicking Add button. Problem is when I change the text field again, My List data gets changed (binding), how to avoid that?
HTML
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm()"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
JS
app.controller('myContrl',["$scope", "$http", function($scope, $http) {
$scope.pms = [];
$scope.addManagersForm = function() {
console.log($scope.pm);
$scope.pms.push($scope.pm);
};
}]);
I am unable to populate list on clicking Add button. Problem is when I change the text field again, My List data gets changed (binding), how to avoid that?
HTML
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm()"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
JS
app.controller('myContrl',["$scope", "$http", function($scope, $http) {
$scope.pms = [];
$scope.addManagersForm = function() {
console.log($scope.pm);
$scope.pms.push($scope.pm);
};
}]);
- You have mis-matched quotes in your example. Is that just a typo? – Rory McCrossan Commented Nov 21, 2013 at 12:58
2 Answers
Reset to default 2It happens because you are pushing the $scope.pm object into the array, and that object is binded in the form.
Just create a new object and you will be fine:
$scope.addManagersForm = function() {
var pm = $scope.pm;
$scope.pm = {}; // Do this to clean up the form fields
$scope.pms.push(pm);
};
It's because instances are passed by reference. You can use angular.copy to create a deep copy of it.
See this example Plunker: http://plnkr.co/edit/d8HwXzTBK61sMuwLollW
The updated code:
HTML page
<body ng-app="app" ng-controller="myContrl">
<div class="control-group">
<label class="control-label" for="projectManager">Project Manager(s)</label>
<div class="row controls" >
<input type="text" class="span3" placeholder="Manager name" ng-model="pm.name">
<input type="text" class="span2" placeholder="Manager type" ng-model="pm.type">
<button type="button" ng-click="addManagersForm(pm)"> Add </button>
</div>
<div class="row controls" >
<ul><li ng-repeat="tPm in pms">{{tPm.name}}</li></ul>
</div>
</div>
JavaScript
angular.module('app', []).controller('myContrl',["$scope", "$http", function($scope, $http) {
$scope.pms = [];
$scope.addManagersForm = function(pm) {
console.log(pm);
$scope.pms.push(angular.copy(pm));
};
}]);