2

Angularjs で質問があります。ng-repeat を使用して DOM 要素の入力とユーザーのボタンを追加/削除しようとしているので、ボタンを使用して入力要素を追加または削除できます。

実際、私のコードはこれを意味します。

これはhtmlコードです：

<a class="btn pull-right" ng-click="addInputRow()">add input</a>    
<p class="" ng-repeat="item in controlNumberOfInputRows">
 <span>NO.{{$index+1}}</span>
 name:<input name="name" type="text" class="span2" /> 
 phone:<input name="phone" type="text" class="span2" /> 
 ID:<input name="ID" type="text" class="span3" />
 <a class="class" ng-click="deleteThis($index)">X</a>
</p>

JavaScript コード:

myModule.controller('MainCtrl', function($scope,$http){

$scope.controlNumberOfInputRows = [];

$scope.addInputRow = function(){

    $scope.controlNumberOfInputRows.push(0);

}

$scope.deleteThis = function(st){
    $scope.controlNumberOfInputRows.splice(st,1);

};

しかし、このコードには、ユーザーがアイテムを削除するときにバグがあり、Angulayjs は最後のアイテムのみを削除します。

私が設定した場合：

$scope.controlNumberOfInputRows = [0,1,2,3,4];

[0]~[4] では非常にうまく機能し、ユーザーはインデックスでアイテムを削除できますが、[5]~[X] (最後のものを削除) ではできません。

なんで？

PS私が設定した場合：

$scope.controlNumberOfInputRows = [0,1,2,3,4];

[0]~[4] で非常にうまく機能し、ユーザーはインデックスでアイテムを削除できます

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X   << delete this
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X

次に、次のようになります。

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X

追加入力を使用する場合

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X   
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X
name[Wells] Phone[123] ID[6] X
name[Wells] Phone[123] ID[7] X
name[Wells] Phone[123] ID[8] X  << delete this
name[Wells] Phone[123] ID[9] X

次に、次のようになります。

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X   
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X
name[Wells] Phone[123] ID[6] X
name[Wells] Phone[123] ID[7] X
name[Wells] Phone[123] ID[8] X

アクロバットで問題を解決すると思います：

    var index = 0;
    $scope.controlNumberOfInputRows = [];
    $scope.addInputRow = function(){
       index ++;
       $scope.controlNumberOfInputRows.push(index);      
    }

これはうまくいきますが、なぜですか？知らん...

4

2 に答える 2

0

これを試してください：削除を行います：

<a class="btn pull-right" ng-click="addInputRow()">add input</a>    
<p class="" ng-repeat="(key,value) in controlNumberOfInputRows">
 <span>NO.{{value+1}}</span>
 name:<input name="name" type="text" class="span2" /> 
 phone:<input name="phone" type="text" class="span2" /> 
 ID:<input name="ID" type="text" class="span3" />
 <a class="class" ng-click="deleteThis($index)">X</a>
</p>

これを正しく行うには、ディレクティブを使用する必要があります。ここを参照してください: DOM 操作の処理 - AngularJS

于 2013-04-08T04:22:35.217 に答える
0

私はアクロバティックに自分の問題を解決すると思う

    $scope.addInputRow = function(){
       index ++;
       $scope.controlNumberOfInputRows.push(index);      
    }

これはよく言いますが、なぜですか？知らん...

于 2013-04-09T01:45:12.620 に答える