$scope.data = [{
'id': '1',
'itemName': 'mousepad',
'price': '20'
}, {
'id': '2',
'itemName': 'keyboard',
'price': '20'
}, {
'id': '3',
'itemName': 'charger',
'price': '20'
}]
$scope.checkedTrue = function(h) {
$scope.demoArr = [];
$scope.demo = [];
$scope.demoArr.push(h);
function check() {
var deee = $.grep($scope.demoArr, function(record) {
console.log('iijjdkkdkkdkd======>', record);
return record
});
$scope.checkDemo = deee;
}
check();
$scope.demo.push($scope.checkDemo);
};<table class="table m-t-30">
<thead>
<tr>
<th>#</th>
<th>ItemName {{selected}}</th>
<th>ItemPrice</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tic in data track by $index">
<td>
<input id="checkbox2" type="checkbox" ng-model="selected[tic.id]" ng-change="checkedTrue(tic)"/>
</td>
<td><span>{{tic.itemName}}</span></td>
<td><span>{{tic.price}}</span></td>
</tr>
</tbody>
</table>我在 ng-repeat 中有这个总数组:
var data = [{
'id': '1',
'itemName': 'mousepad',
'price': '20'
}, {
'id': '2',
'itemName': 'keyboard',
'price': '20'
}, {
'id': '3',
'itemName': 'charger',
'price': '20'
}];
所以我在每一行都有复选框，所以如果用户选中该复选框，我需要特定的选中行对象并形成数组
例如:
仅将对象数据 checkin 另一个数组
var Checked = [{
'id': '1',
'itemName': 'mousepad',
'price': '20'
},{
'id': '3',
'itemName': 'charger',
'price': '20'
}];
如果用户取消选中，我想从选中数组中删除该对象
如果再次检查，则该对象再次添加到 Checked 数组中
最佳答案
1- 使用 ng-click 并触发函数
2- 创建一组选中的复选框
3- 当任何复选框发生更改时，检查数组是否存在项目并在数组中添加或删除它
这里是一个简单的例子
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
id: "1",
itemName: "mousepad",
price: "20"
},
{
id: "2",
itemName: "keyboard",
price: "20"
},
{
id: "3",
itemName: "charger",
price: "20"
}
];
$scope.tempModel = '';
$scope.checkedArray = [];
$scope.updateCheckArray = function(itm) {
let index = $scope.checkedArray.findIndex(function(r) {
return r.id == itm.id;
});
if (index == -1) {
$scope.checkedArray.push(itm);
} else {
$scope.checkedArray.splice(index, 1);
}
};
});<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<hr>
<div class="post-content" ng-repeat="d in data">
<input ng-click="updateCheckArray(d)" type="checkbox" ng-model="tempModel" />{{d.itemName}}
<hr>
</div>
{{checkedArray}}
</div>
</body>
</html>更新
1- 将函数体更改为此
$scope.checkedTrue = function(itm) {
let index = $scope.checkedArray.findIndex(function(r) {
return r.id == itm.id;
});
if (index == -1) {
$scope.checkedArray.push(itm);
} else {
$scope.checkedArray.splice(index, 1);
}
};
2-为所选对象添加一个空数组和一个空模型
$scope.tempModel = "";
$scope.checkedArray = [];
对您自己的代码进行的更改:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
id: "1",
itemName: "mousepad",
price: "20"
},
{
id: "2",
itemName: "keyboard",
price: "20"
},
{
id: "3",
itemName: "charger",
price: "20"
}
];
$scope.tempModel = "";
$scope.checkedArray = [];
$scope.checkedTrue = function(itm) {
let index = $scope.checkedArray.findIndex(function(r) {
return r.id == itm.id;
});
if (index == -1) {
$scope.checkedArray.push(itm);
} else {
$scope.checkedArray.splice(index, 1);
}
};
});<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<hr>
<table class="table m-t-30">
<thead>
<tr>
<th>#</th>
<th>ItemName {{selected}}</th>
<th>ItemPrice</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tic in data track by $index">
<td>
<input id="checkbox2" type="checkbox" ng-model="tempModel" ng-change="checkedTrue(tic)" />
</td>
<td><span>{{tic.itemName}}</span></td>
<td><span>{{tic.price}}</span></td>
</tr>
</tbody>
</table>
{{checkedArray}}
</div>
</body>
</html>关于javascript - 选中复选框时形成对象数组 angularjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50576556/