AngularJS - без привязки - PullRequest
Новая
       1

AngularJS - без привязки

0 голосов
/ 31 мая 2018

Я пытался расширить приложение "Heros" из документации AngularJS

Я хотел добавить функциональность создания / добавления героя.

В HeroList.js из этого plunk Я могу добавить нового героя после нажатия кнопки Добавить из HeroList.html.

Однако, если я 'Обновляя поля ввода (скажем, имя), они также редактируются в списке.

Например, если я добавил нового героя (Капитан Америка), нажмите кнопку Добавить, а затем введите Робби, Капитан Америка будетбыть соединенным с Робби.

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

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

вот код, на который вы можете ссылаться https://plnkr.co/edit/?p=preview

<code><!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}}
master = {{master | json}}
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 ();}]);
0 голосов
/ 31 мая 2018

Ваша проблема в том, что у вас есть ссылка на тот же объект героя, поэтому при обновлении текстовых полей он автоматически обновляется в списке.Чтобы избежать этой проблемы, вы можете использовать angular.Copy () 

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

, это создаст отдельную копию для добавления в список.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...