Angularjs: флажок и ng-change

Question

У меня есть проблемы, чтобы понять, как работает нг-изменения. У меня есть список пользователей, чтобы пригласить присоединиться к аукциону. Я хочу сделать это с помощью флажка. Если пользователь проверен, его имя должно быть сохранено в массив. А потом я их приглашаю (я просто знаю, как это сделать). Но я не понимаю, как использовать флажок. Я сделал что-то вроде этого:

<ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
        <img ng-src="{{user.img}}" class="image2" >
        <div class="username"> {{user.name}}</div>
        <div class="userrole"> {{user.role}} </div>
        <div class="usercompany">{{user.company}}</div>
        <input type="checkbox"  ng-model="isChecked" ng-change="insertinvited(user.name)">
    </li>
</ul>

И в моем контроллере:

$scope.invited = [];
$scope.insertinvited= function (name) {
    if($scope.isChecked){
        $scope.invited.push(name)
    } else {
        console.log($scope.invited);
    }
};

Но это не работает, в консоли массив всегда пуст.

Answer 1

Проблема в вашем коде в том, что ваша модель флажка (isChecked) используется всеми users Вы повторяли:

<ul class="list-group" ng-repeat="user in users">
    ...
    <input type="checkbox" ng-model="isChecked" ng-change="insertinvited(user.name)">
</ul>

Я предлагаю вам иметь модель флажка для каждого пользователя:

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

Обратите внимание, что в вашем ng-changeЯ сдаю весь user объект, и не только user.name (потому что мне также понадобится user.isChecked имущество).

---

Вот "новый" insertinvited() функция:

$scope.insertinvited = function(user) {
    if(user.isChecked) {
        $scope.invited.push(user.name);
    } else {
        var toDel = $scope.invited.indexOf(user);
        $scope.invited.splice(toDel);
    }
}

Answer 2

Что вам нужно здесь isChecked для всех предметов в ng-repeat и не только как одна переменная. Итак, я изменил ваш checkbox лайк:

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

Вот рабочий пример:

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function(user) {
      if (user.isChecked) {
        $scope.invited.push(user.name)
      } 
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

РЕДАКТИРОВАТЬ: Тем не менее, делая это таким образом, вам также придется обрабатывать удаление. Я бы посоветовал вам использовать следующий подход.

Объяснение: При изменении любого значения флажка вы фильтруете всех пользователей с помощью isChecked установлен в true,

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function() {
      $scope.invited = $scope.users.filter(obj => obj.isChecked)
      $scope.invited = $scope.invited.map(obj => obj.name)
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

Answer 3

Используй это

<input type="checkbox" id="{{'j' + $index}}" name="{{'j' + $index}}" ng-model="tasks.Checked" ng-change="checkinTask(tasks)"

Эта часть из контроллера.

$scope.checkinTask = function (task) {

                        if (task.Checked === true) {
                            task.Lineclass = "checkedTask";
                            $scope.disabled = false;
                            trash.removeClass("disabled");
                        } else {
                            task.Lineclass = "";
                        }
                        var checkedExist = false;
                        tasks.forEach(function (v) {
                            if (v.Checked) {
                                checkedExist = true;
                            }
                        });
                        if (!checkedExist) {
                            $scope.disabled = true;
                            trash.addClass("disabled");
                        }
                    };