Форма массива объектов при установке флажка 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 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'
        }];

Так что у меня есть флажки в каждой строке, так что если пользователь проверяетфлажок мне нужен этот конкретный проверенный объект строки и в виде массива

Например:

Проверяется только данные объекта в другой массив

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

Если пользователь снимает флажок яхотите удалить объект из Проверено массив

Если снова проверить, то этот объект снова добавлен в Проверяемый массив

Answer 1

Вы можете проверить скрипач, я реализовал то, что вам нужно

Скрипка

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

Answer 2

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>