AngularJS - unwated binding

Question

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);

Don't actually meant to add the code from HeroList.js but SO obliged me. — Liviu Sosu
– Liviu Sosu, Commented May 31, 2018 at 8:39

Hany Habib · Accepted Answer · 2018-05-31 08:51:04Z

3

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.

answered May 31, 2018 at 8:51

Hany Habib

1,4152 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Liviu Sosu Over a year ago

Thank you @Hany Habib! Your answer has been voted up and approved. Can you pleas help me with this question as well? stackoverflow.com/questions/50625262/…

Ashish Kamble · Accepted Answer · 2018-05-31 09:14:30Z

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
-->

Collectives™ on Stack Overflow

AngularJS - unwated binding

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related