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

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

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

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


javascript checkbox angularjs angularjs-ng-change
person mpeg90    schedule 28.04.2017    source источник

Ответы (3)


arrow_upward
19
arrow_downward

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

<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.name);
        $scope.invited.splice(toDel, 1);
    }
}
person Mistalis    schedule 28.04.2017
comment
хорошо, это работает! Но что, если мне придется удалить имя из массива, если я снова щелкну? В этом коде, если я устанавливаю флажок, имя пользователя сохраняется. Но если я сниму флажок, имя все равно останется в массиве. что мне нужно использовать, если я хочу удалить имя при снятии флажка? - person mpeg90; 28.04.2017
comment
@MarcoPagano Я обновил свой ответ, добавив else для удаления. Примите ответ, если он решил вашу проблему - person Mistalis; 28.04.2017
comment
Подожди, я не знаю, какой из ответов предпочитаю: D. Однако остальное не работает. Когда я выбрал только одного пользователя, он работает. Но когда я выбрал более одного, он соединяет последний, который я добавил, а не правильный - person mpeg90; 28.04.2017
comment
используйте $ scope.invited.splice (toDel, 1); тогда это будет работать - person Ricky sharma; 21.06.2019

arrow_upward
1
arrow_downward

Здесь вам понадобится 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>

person tanmay    schedule 28.04.2017
comment
хорошо, это работает! Но что, если мне придется удалить имя из массива, если я снова щелкну? В этом коде, если я устанавливаю флажок, имя пользователя сохраняется. Но если я сниму флажок, имя все равно останется в массиве. что мне нужно использовать, если я хочу удалить имя при снятии флажка? - person mpeg90; 28.04.2017

arrow_upward
0
arrow_downward

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

<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");
                        }
                    };
person Volodymyr Kozlov    schedule 28.04.2017