CODEWITHSUNDEEP
javascriptangularjs
Liviu Sosu
Liviu Sosu

Reputation: 1547

AngularJS - unwated binding

I tried to extend the "Heros" application from the AngularJS documentation

I wanted to add the functionality of creating/adding a hero.

In the HeroList.js from this plunk I am able to add a new hero after clicking the button Add from the HeroList.html.

However, if I'm updating the input fields (let's say name) they get edited in the list as well.

For example, if I added a new hero (Captain America), click Add, and then type Robby, Captain America will be concatenated with Robbie. 

(function(angular) {
  'use strict';
function HeroListController($scope, $element, $attrs) {
  var ctrl = this;

  // This would be loaded by $http etc.
  ctrl.list = [
    {
      name: 'Superman',
      location: ''
    },
    {
      name: 'Batman',
      location: 'Wayne Manor'
    }
  ];

   ctrl.create = function(hero) {
    ctrl.list.push(hero);
  };

  ctrl.updateHero = function(hero, prop, value) {
    hero[prop] = value;
  };

  ctrl.deleteHero = function(hero) {
    var idx = ctrl.list.indexOf(hero);
    if (idx >= 0) {
      ctrl.list.splice(idx, 1);
    }
  };
}

angular.module('heroApp').component('heroList', {
  templateUrl: 'heroList.html',
  controller: HeroListController,
  bindings: {
    onCreate: '&'
  }
});
})(window.angular);

Upvotes: 0

Views: 52

Answers (2)

Ashish Kamble
Ashish Kamble

Reputation: 2627

here is some code you can refer https://plnkr.co/edit/?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-forms-simple-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>



</head>
<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <label>E-mail: <input type="email" ng-model="user.email" /></label><br />
    Best Editor: <label><input type="radio" ng-model="user.preference" value="vi" />vi</label>
    <label><input type="radio" ng-model="user.preference" value="emacs" />emacs</label><br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);
</script>
</body>
</html>

<!-- 
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Upvotes: 0

Hany Habib
Hany Habib

Reputation: 1405

Your Problem is that you are having reference to same Hero Object so when you update the text fields it will automatically update it in the list. To Avoid this problem you can use angular.Copy()

 ctrl.create = function(hero) {
    ctrl.list.push(angular.copy(hero));
  };

this will create separate copy to be added to the list.

Upvotes: 3

Related Questions