Angularjs: case à cocher et ng-changement

J'ai des problèmes pour comprendre comment ng-changer de travail. J'ai une liste d'utilisateur pour les inviter à se joindre à une vente aux enchères. Je veux le faire avec une case à cocher. Si l'utilisateur est vérifiée, son nom doit être enregistré dans un tableau. Et plus tard, je vais les inviter(je sais juste comment le faire). Mais je ne comprends pas comment utiliser la case à cocher.
J'ai fait quelque chose comme ceci: 

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

Et dans mon controller:

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

Mais ce n'est pas de travail, dans la console du tableau est toujours vide.

InformationsquelleAutor mpeg90 | 2017-04-28
  1. 13

    Le problème dans ton code, c'est que votre case modèle (isChecked) est utilisé par tous les users vous ngRepeated sur:

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

    Je vous suggère d'avoir une case à cocher modèle pour chaque utilisateur:

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

    Remarque que dans votre ng-change, j'ai passer l'ensemble des user objet, et pas seulement user.name (parce que j'ai également besoin de l' user.isChecked propriété).

    Ici est le "nouveau" insertinvited() fonction:

    $scope.insertinvited = function(user) {
    if(user.isChecked) {
        $scope.invited.push(user.name);
    } else {
        var toDel = $scope.invited.indexOf(user);
        $scope.invited.splice(toDel);
    }
}
    • ok, cela fonctionne! Mais si je n'ai qu'à supprimer le nom de la matrice si je clique à nouveau? Dans ce code, si je clique sur la case, le nom d'utilisateur est enregistré. Mais si je désélectionnez la case à cocher le nom de la restent encore dans le tableau. ce que j'ai à l'utiliser si je veux supprimer le nom quand je désélectionnez la case à cocher?
    • J'ai mis à jour ma réponse pour ajouter un else pour la suppression. Veuillez accepter la réponse si il résolu votre problème
    • Tellement cool ! Je comprends parfaitement 😉
    • Attendez, je ne sais pas laquelle des réponses que je préfère :D. Cependant l'autre ne fonctionne pas. Lorsque j'ai sélectionné qu'un seul utilisateur, il fonctionne. Mais quand j'ai sélectionné plus d'un, il épissure le dernier que j'ai ajouté, pas le droit
    • utiliser $champ d'application.invitée.splice(toDel, 1); ensuite, il sera
    InformationsquelleAutor Mistalis
  2. 1

    Ce dont vous avez besoin ici est isChecked pour tous les éléments dans ng-repeat et pas seulement comme une simple variable. Donc, j'ai changé votre checkbox comme:

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

    Voici de travail exemple:

    JS:

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

    };
  })

    HTML:

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

    MODIFIER: Toutefois, cette façon de faire, vous avez besoin pour gérer le retrait également. Je vous suggère d'aller avec l'approche suivante à la place.

    Explication: Sur le changement de case de valeur, vous filtrez tous les utilisateurs avec isChecked ensemble de true.

    JS:

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

    };
  })

    HTML:

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

    • ok, cela fonctionne! Mais si je n'ai qu'à supprimer le nom de la matrice si je clique à nouveau? Dans ce code, si je clique sur la case, le nom d'utilisateur est enregistré. Mais si je désélectionnez la case à cocher le nom de la restent encore dans le tableau. ce que j'ai à l'utiliser si je veux supprimer le nom quand je désélectionnez la case à cocher?
    • réponse avec cette mise à jour
    InformationsquelleAutor tanmay
  3. 0

    Utiliser 

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

    Cette Partie de contrôleur.

    $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");
                        }
                    };
    InformationsquelleAutor Volodymyr Kozlov