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>

控制器

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

Answer 2

最简单的方法是在输入中使用ng-model，然后将其附加到列表中。然后，您可以从控制器轻松访问它。

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

app.controller('MainCtrl', function($scope) {

  var vm = this;
  vm.job = { position: '', requirements: [] };

  function create(job) {
    alert("job created");
  }

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

  vm.create = create;
  vm.addRequirement = addRequirement;

});

并在html中：

 <input type="button" value="Add Requirement" ng-click="vm.addRequirement()"/>

以角度添加项目到列表

2 个答案: