检查复选框angularjs时的对象数组形式

Question

 $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>

I have this total array in ng-repeat: 我在ng-repeat中有这个总数组：

var data = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
        }, {
            'id': '2',
            'itemName': 'keyboard',
            'price': '20'
        }, {
            'id': '3',
            'itemName': 'charger',
            'price': '20'
        }];

So i have check boxes in each row, so if user check the checkbox i need that particular checked row object and to form as array 所以我在每行中都有一个复选框，所以如果用户选中该复选框，我需要那个特定的选中行对象并形成数组

For example: 例如：

Checked only object data in to another array 仅将对象数据检入另一个数组

var Checked = [{
            'id': '1',
            'itemName': 'mousepad',
            'price': '20'
         },{
        'id': '3',
        'itemName': 'charger',
        'price': '20'
    }];

If user uncheck i want to remove the object from Checked array 如果用户取消选中我想从Checked数组中删除对象

If it again check then that object again added to Checked array 如果再次检查，则该对象再次添加到Checked数组

Answer 1

1- Use ng-click and trigger a function 1-使用ng-click并触发功能

2- Create an array of checked checkboxes 2-创建一组选中的复选框

3- When ever any checkbox changed, Check the array for existence of item and add or remove it from array 3-更改任何复选框时，检查数组中是否存在项目，然后从数组中添加或删除它

A simple example here 一个简单的例子

 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>

Update 更新资料

1- Change function body to this 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- Add an empty array for selected and an empty model 2-为选择的模型和模型添加一个空数组

$scope.tempModel = "";
$scope.checkedArray = [];

Changes for your own code: 更改您自己的代码：

 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>

Answer 2

You can check the fiddler, i have implemented what you need 您可以检查提琴手，我已经实现了您所需要的

Fiddle 小提琴

<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)         
      }
    }    
  }

检查复选框angularjs时的对象数组形式

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-05-29 05:14:53

解决方案2
0 2018-05-29 05:20:09

检查复选框angularjs时的对象数组形式

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-05-29 05:14:53

解决方案2 0 2018-05-29 05:20:09

解决方案1
2 已采纳 2018-05-29 05:14:53

解决方案2
0 2018-05-29 05:20:09