Javascript AngularJS-未经处理的绑定_Javascript_Angularjs

Javascript AngularJS-未经处理的绑定

javascript angularjs

Javascript AngularJS-未经处理的绑定,javascript,angularjs,Javascript,Angularjs,我试图从我想添加创建/添加英雄的功能在HeroList.js中，我可以在HeroList.html中单击add按钮后添加一个新的英雄但是，如果我更新输入字段（比如名称），它们也会在列表中被编辑例如，如果我添加了一个新英雄（美国队长），单击Add，然后键入Robby，美国队长将与Robbie连接 (function(angular) { 'use strict'; function HeroListController($scope, $element, $attrs) { var

我试图从

我想添加创建/添加英雄的功能

在HeroList.js中，我可以在HeroList.html中单击add按钮后添加一个新的英雄

但是，如果我更新输入字段（比如名称），它们也会在列表中被编辑

例如，如果我添加了一个新英雄（美国队长），单击Add，然后键入Robby，美国队长将与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);

您的问题是，您正在引用同一个Hero对象，因此当您更新文本字段时，它将在列表中自动更新它。要避免此问题，可以使用angular.Copy（）

这将创建要添加到列表中的单独副本。

您的问题是您引用了同一个Hero对象，因此当您更新文本字段时，它将自动在列表中更新它。要避免此问题，可以使用angular.Copy（）

这将创建要添加到列表中的单独副本。

以下是一些您可以参考的代码


示例-示例形成简单的产品
名称：

电子邮件：

最佳编辑：vi
emacs

user={{user | json}}
master={{master | json}}
angular.module（'formExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.master={}；
$scope.update=函数（用户）{
$scope.master=angular.copy（用户）；
};
$scope.reset=函数（）{
$scope.user=angular.copy（$scope.master）；
};
$scope.reset（）；
}]);

以下是一些您可以参考的代码


示例-示例形成简单的产品
名称：

电子邮件：

最佳编辑：vi
emacs

user={{user | json}}
master={{master | json}}
angular.module（'formExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.master={}；
$scope.update=函数（用户）{
$scope.master=angular.copy（用户）；
};
$scope.reset=函数（）{
$scope.user=angular.copy（$scope.master）；
};
$scope.reset（）；
}]);

我不是真的想添加HeroList.js的代码，但我很感激。我不是真的想添加HeroList.js的代码，但我很感激。谢谢@Hany Habib！你的答案已被投票通过。你能帮我解决这个问题吗？谢谢你@Hany Habib！你的答案已被投票通过。你能帮我解决这个问题吗？

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

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