在angular中添加列表项

Add items to list in angular

本文关键字：列表 添加 angular      更新时间：2023-09-26

我有以下创建一个职位和多个要求的工作普伦克的例子:

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

当我添加一个需求时，我在列表中看到它，但是当我试图添加一个新的需求时，已经在列表中的需求开始改变。我不想那样。我想在列表中添加一个新的。

最后，当我使用"Create Job"提交表单时，我将把所有的Job数据发送到API。

问题出在你的addrerequirement函数上，因为你正在向列表中添加相同的对象(这就是当你编辑输入框时你的项目改变名称的原因)。

要使您的示例按预期工作，您应该推送一个需求对象的克隆(参见文档)。

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

最简单的方法是对您想要添加到列表中的输入使用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()"/>
相关文章：