javascript - 将项目添加到 Angular 列表中

Question

我有以下内容来创建一个具有职位和多项要求的工作 Plunker example :

<div ng-controller="MainCtrl as vm">      
  <div>Position: <span data-ng-bind="vm.job.position"></span></div>      
  <br/>      
  <form name="form" data-ng-submit="vm.create(job)">        
    <label for="position">Enter the Position</label>
    <input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
    <div>
      <br/>
      Requirements:
      <br/>
      <ul>
        <li data-ng-repeat="r in vm.job.requirements">{{r.name}}</li>
      </ul>
      <input id="name" name="requirement.name" type="text" data-ng-model="requirement.name" />
      <input type="button" value="Add Requirement" class="button" data-ng-click="vm.addRequirement(requirement)"/>          
    </div>        
    <br/><br/>                
    <button>Create Job</button>              
  </form>            
</div>    

Controller

var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope) {
    var vm = this;  
    vm.job = { position: '', requirements: [] };

    vm.create = function (job) {      
      alert("job created");    
    }

    vm.addRequirement = function (requirement) {
      vm.job.requirements.push(requirement);
    }  

});

当我添加一项要求时，我会在列表中看到它，但是当我尝试添加新要求时，列表中已有的要求开始发生变化。我不要那个。我想在列表中添加一个新的。

最后，当我使用“创建作业”提交表单时，我会将所有作业数据发送到 API。

Answer 1

问题出在您的 addRequirement 函数上，因为您正在将相同的对象添加到列表中(这就是您的项目在编辑输入框时更改名称的原因)。

为了使您的示例按预期工作，您应该推送需求对象的克隆(请参阅 documentation )。

 vm.addRequirement = function (requirement) {
   vm.job.requirements.push( angular.copy(requirement) );
 }