Question

我试图扩展＆＃34; Heros＆＃34;来自AngularJS documentation

的申请

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

在这个plunk的HeroList.js中，我可以在点击HeroList.html上的Add按钮后添加一个新的英雄。

但是，如果我更新输入字段（让我们说名字），他们也会在列表中进行编辑。

例如，如果我添加了一个新的英雄（美国队长），单击添加，然后键入Robby，美国队长将与罗比连接。

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

Answer 1

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

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

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

Answer 2

这里有一些代码可以参考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
-->

AngularJS - 未命中的绑定

2 个答案: