[英]Submitting an Array of Checkbox Values with AngularJS & Laravel 4. Checkboxes not Checking (Visually)
[英]Form array of objects when checking the checkbox angularjs
$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 mt-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'
}];
所以我在每行中都有一個復選框,所以如果用戶選中該復選框,我需要那個特定的選中行對象並形成數組
例如:
僅將對象數據檢入另一個數組
var Checked = [{
'id': '1',
'itemName': 'mousepad',
'price': '20'
},{
'id': '3',
'itemName': 'charger',
'price': '20'
}];
如果用戶取消選中我想從Checked數組中刪除對象
如果再次檢查,則該對象再次添加到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 mt-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>
您可以檢查提琴手,我已經實現了您所需要的
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="item in data">
<input type="checkbox" value="{{item.id}}" ng-click="addTo($event)">
{{item.itemName}}
</li>
</ul>
<br>
<h4>
Added Array
</h4>
{{itemArray}}
</div>
</div>
function TodoCtrl($scope) {
$scope.data = [{
'id': '1',
'itemName': 'mousepad',
'price': '20'
}, {
'id': '2',
'itemName': 'keyboard',
'price': '20'
}, {
'id': '3',
'itemName': 'charger',
'price': '20'
}];
$scope.itemArray = [];
$scope.addTo = function(event){
if(event.currentTarget.checked){
$scope.itemArray.push(this.item)
}else{
$scope.itemArray.pop(this.item)
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.