項添加到列表中的角

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()"/>