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 回答