Angularjs动态添加和删除输入

Question

我的代码在jsfiddle。

HTML

<div ng-controller="MyCtrl"> 
    <input> 
    <button ng-click='add()'>Add</button> 
    <br/> 
    <b>Items Added Below</b> 
    <div ng-repeat='item in items'> 
    <input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/> 
    <button ng-click='del($index)'>DEL</button> 
    </div> 
</div> 

角控制器

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
    $scope.items = []; 
    $scope.newitem = ''; 
    $scope.add = function(){ 
    if ($scope.items.length < 4) { 
     $scope.items.push($scope.newitem); 
    } 
    } 
    $scope.del = function(i){ 
    $scope.items.splice(i,1); 
    } 
} 

我尝试动态添加输入伍单击并删除特定却始终删除最后输入..
我想它因为它们没有区分项目数组。
我该如何解决这个问题？

Answer 1

你的代码工作正常，只要你想。

只是一个错误，你没有添加ng模型输入newitem。

Look JsFiddle

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <input ng-model="newitem"> 
    <button ng-click='add()'>Add</button> 
    <br/> 
    <b>Items Added Below</b> 
    <div ng-repeat='item in items'> 
    <input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/> 
    <button ng-click='del($index)'>DEL</button> 
    </div> 
</div> 
</div> 

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
    $scope.items = []; 
    $scope.newitem = ''; 
    $scope.add = function(){ 
    if ($scope.items.length < 4) { 
     $scope.items.push($scope.newitem); 
    } 
    } 
    $scope.del = function(i){ 
    $scope.items.splice(i,1); 
    } 
} 

Answer 2

有两个部分是：

1. 你是不是绑定你的第一个输入（旁边添加）。这意味着你只是将“'添加到数组中。据我所知，angularjs通过键跟踪，而不是默认的索引。这导致我到第2部分。
2. 您正在使用一个旧的AngularJS版本，它根据docs没有选项“{expr} track by $ index”。有关此信息，请参阅1.4.4 docs。

所以我可能会使用最新的稳定的AngularJS，并确保您的第一个输入绑定到$ newitem。

Answer 3

看一看下面的小提琴：

fiddle ::http://jsfiddle.net/4zt4ynzL/

的问题是，你正在推动在阵列中每一次空字符串。

正如我在上面的小提琴中所展示的，每增加一次按钮，我都会推出一个新的值。

P.S. ：你做的一切都是正确的:)

Answer 4

在简单的方法，你可以这样做：

HTML：

<span ng-repeat="hobby in hobbies track by $index"> 
    <div class="form-group"> 
     <input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/> 
     <button ng-click = "addHobby()" ng-show="$last">+</button> 
     <button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button> 
    </div> 
</span> 

角控制器：

$scope.hobbies = ['']; 

$scope.addHobby = function() { 
    $scope.hobbies.push(''); 
} 

$scope.removeHobby = function(index) { 
    if(index >= 0){ 
     $scope.hobbies.splice(index, 1); 
    } 
}