1

AngularJS と LocalStorage を使用してアプリを構築しています。私には少し複雑すぎるという問題に遭遇しました。

私は人のリストを持っています。アイデアは、名前の配列を追加できるようにすることです。X 名を選択し、[追加] をクリックして、配列にオブジェクトを作成すると、リストがリセットされ、最初からやり直すことができます。X 名を選択し、[追加] をクリックします。

LocalStorage にプッシュする一時配列を作成する方法は次のとおりです。

HTML:

<form>
  <div class="col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
    <button class="btn form-control" ng-show="!staff.chosen" ng-click="pushStaff(staff)">{{staff.name}}</button>
    <button class="btn btn-primary form-control" ng-show="staff.chosen" ng-click="unpushStaff(staff)">{{staff.name}}</button>
  </div>
  <button class="btn ng-click="addRecord()">Add passangers</button>
</form>

JS: 

$scope.paxlist = [];
$scope.pushStaff = function (staff) {
    staff.chosen = true;
    $scope.paxlist.push(staff);
    console.log($scope.paxlist);
};

$scope.unpushStaff = function (staff) {
    staff.chosen = false;

    var index=$scope.paxlist.indexOf(staff)
    $scope.paxlist.splice(index,1);     
    console.log($scope.paxlist);
}

私の問題は、配列にオブジェクトを作成できることですが、オブジェクトを追加すると、名前のリストの選択された項目がリセットされないため、次のオブジェクトを追加するときに事前に選択されます。同時に、最後に追加されたオブジェクトにもリンクされたままになるため、選択を変更すると、最後のオブジェクトも変更されます。

これはまた、配列の各オブジェクトに編集機能を追加する可能性を台無しにします。

この問題を説明するPlnkrを作成しました。

問題に光を当てることができれば、それは素晴らしいことです。

4

1 に答える 1

1

プロパティaddRecordのリセットが必要ですchosen 

$scope.addRecord = function () {
    $scope.recordlist.push({ pax: angular.copy($scope.paxlist) });

    jsonToRecordLocalStorage($scope.recordlist);

    $scope.editItem = false;
    $scope.paxlist  = [];

    $scope.stafflist.forEach(function (el) {
      el.chosen = false;
    });
};

デモ: http://plnkr.co/edit/vV8OuKiTKYkFyy7SrjOS?p=preview

于 2014-12-21T08:12:41.410 に答える