我正在使用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来说明问题。
如果你能对这个问题有所了解,那就太棒了。
答案 0 :(得分: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;
});
};