0

誰かが連絡先に 1 つ以上の場所を追加するページを作成したいのですが、現在、このようなものがあります。

<div class="input-append" ng-repeat="location in newPartner.partner_location">
    <input class="input-large" type="text" ng-model="location">
    <button class="btn" type="button" ng-click="delLocation1({{$index}})">- {{$index}}</button>
</div>

<div class="input-append">
    <input class="input-large" type="text" ng-model="new_location">
    <button class="btn btn-primary" type="button" ng-click="addLocation1()">+</button>
</div>

これは HTML で、コントローラーは次のようになります。

$scope.newPartner = {'partner_name':'newname','partner_location':['X','Y','Z']};

$scope.addLocation1 = function() {
    $scope.newPartner.partner_location.push($scope.new_location);
    $scope.new_location = "";
}
$scope.delLocation1 = function(id) {
    $scope.newPartner.partner_location.splice(id, 1);
}

今では開始時にうまく機能しますが、いくつかのアイテムを削除していくつかを追加すると、突然バグが発生し、押したアイテムの代わりに前のアイテムの削除を開始します - (マイナス) をオンにします。

私が間違ったことはありますか？よろしくお願いします、ダニエル！

4

1 に答える 1

1

まず、 から削除{{}}しng-click="delLocation1({{$index}})"ます。そのはず：

ng-click="delLocation1($index).

次に、基本的なデバッガーを追加して、新しい値を追加したときにモデルに何が起こるかを確認することをお勧めします。<pre>{{newPartner.partner_location|json}}</pre>

3 番目に、モデルを次のように変更します。

$scope.newPartner = {
        'partner_name': 'newname',
        'partner_location': [{value:'X'}, {value:'Y'}, {value:'Z'}]
    };

なぜなら、この方法で['X','Y','Z']は、データを変更できないからです。

デモFiddle

最後に、これが修正されたコードです。

HTML

<div ng-controller="fessCntrl">
    <div  ng-repeat="location in newPartner.partner_location">
        <input class="input-large" type="text" ng-model="location.value">
        <button class="btn" type="button" ng-click="delLocation1(newPartner.partner_location, $index)">{{$index}}</button>
    </div>
    <div class="input-append">
        <input class="input-large" type="text" ng-model="new_location">
        <button class="btn btn-primary" type="button" ng-click="addLocation1()">+</button>
    </div>        
        <pre>{{newPartner.partner_location|json}}</pre>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.new_location = "empty";

    $scope.newPartner = {
        'partner_name': 'newname',
        'partner_location': [{value:'X'}, {value:'Y'}, {value:'Z'}]
    };

    $scope.addLocation1 = function () {
        $scope.newPartner.partner_location.push({value:$scope.new_location});
        $scope.new_location = "empty";
    }
    $scope.delLocation1 = function (locations, index) {
        locations.splice(index, 1);
    }
});

fessmodule.$inject = ['$scope'];
于 2013-10-30T09:58:44.763 に答える