web-dev-qa-db-fra.com

Comment désactiver les cases à cocher si une autre case avec le même identifiant est cochée

J'ai une table avec une case à cocher dans l'une des colonnes. Lorsqu'une case à cocher est cochée I Poussez la ligne dans un tableau.

J'ai essayé de mieux l'expliquer en termes de monde réel en bas

La table peut avoir des lignes avec un ID en double (la colonne de la ligne (flat_id) est différente). L'identifiant en double que j'ai mentionné ci-dessus est user_map_id.

Lorsque je coche (coche) une ligne, je souhaite désactiver les autres lignes avec le même user_map_id.

Ainsi, quand une ligne est cochée, je stocke le user_map_ids dans un tableau. Et puis je fais ça:

ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0

c'est-à-dire que je désactive la ligne si le user_map_id est présent dans le tableau avec le user_map_ids sélectionné, mais cela désactive celui que j'ai coché aussi et je ne peux pas le décocher si je le souhaite.

J'ai donc poussé le flat_ids dans un tableau aussi et j'ai fait ceci:

ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0 "

i.e Désactiver la ligne si le user_map_id de la ligne est présent dans le tableau selectedUserMapIdArray (qui stocke le user_map_id) et non présent dans la selectedFlatNumArray (qui stocke le flat_id)

Mais maintenant, lorsque je vérifie une ligne qui a un flat_id particulier qui est commun avec l’un des user_map_id en double, flat_id en double, puis de nouveau dans le groupe, celle avec le flat_id commun ne sera pas désactivée car le flat_id que j’ai vérifié ci-dessus est présent dans la selectedFlatNumArray (qui stocke le flat_id).

Expliquer en termes de monde réel

Voici une capture d'écran:  Image

Les lignes dans la table sont une liste de propriétaires et d'occupants d'appartements (les deux ont user_map_id). Un propriétaire d'appartement peut avoir plusieurs appartements (par conséquent, dupliquer user_map_ids dans le tableau). Le propriétaire de l'appartement peut avoir plusieurs appartements (différents flat_ids).

Mais le propriétaire de l'appartement peut avoir un occupant (même flat_id différent user_map_id). L'occupant peut résider dans l'un des nombreux appartements du propriétaire (même flat_id différent user_map_id).

Je veux pouvoir vérifier n'importe lequel des propriétaires de l'appartement (les autres deviennent handicapés) et aussi un occupant (si je le souhaite).

Si je vérifie la rangée avec l'un des appartements du propriétaire, les autres rangées appartenant au même propriétaire sont désactivées et fonctionnent correctement.

Mais lorsque je vérifie une ligne avec un occupant, puis à nouveau un propriétaire d'appartement de cet occupant (qui n'a pas le même flat_id), la ligne avec le même flat_id ne sera pas désactivée car le flat_id est présent dans la selectedFlatNumArray (qui stocke l'identifiant )

Comment puis-je faire cela?

La table:

 <tbody>
    <tr ng-repeat="flat in someObj.flatsArray | filter:searchFlat">
       <td>{{ flat.occupant_name || flat.owner_name}}</td>
       <td>{{flat.flat_no}}</td>
       <td class="text-center">
     <input class="" name="{{flat.flat_no}}" ng-attr-title="{{(selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0) ? 'This user has been already invited' : ''}}"
         ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && selectedFlatNumArray.indexOf(flat.flat_id) < 0 "
     type="checkbox" ng-change="checkChanged(flat.isChecked, flat)" ng-model="flat.isChecked" />
              </td>
</tr>
</tbody>
javascriptangularjs
6
Abhi

Je pense que votre ng-disabled et votre ng-title devraient être simplifiés pour qu'il soit plus facile à suivre. Je propose de supprimer vos tableaux et d'effectuer une itération sur votre original pour voir s'il répond à vos conditions lorsqu'un flat est modifié. Il serait plus facile de déboguer et d'éviter les erreurs.

<input name="{{flat.flat_no}}" 
       ng-attr-title="{{flat.title}}"
       ng-disabled="flat.isDisabled"
       type="checkbox" 
       ng-change="flatChange(flat)" 
       ng-model="flat.isChecked" />

Je proposerais de parcourir votre objet lorsque vous modifiez une case à cocher pour apporter les modifications aux autres appartements. Attention, c'est du code non testé, il peut donc nécessiter quelques ajustements.

$scope.flatChange = function(changedFlat) {
    $scope.someObj.flatsArray.forEach(function(flat) {

        if (changedFlat.checked) {
            if (flat.user_map_id === changedFlat.user_map_id && flat.flat_id !== changedFlat.flat_id) {
                if (changedFlat.idChecked) // If flat is checked, uncheck each one with the same `user_map_id` but not the same `flat_id`.
                    flat.isChecked = false;
                }

                flat.isDisabled = !changedFlat.checked; // `disabled` propriety is the opposite of `checked`.
                flat.title = changedFlat.checked
                            ? 'This user has been already invited'
                            : '';
         }
     });
 };
4
L105

Je ne comprends pas tout à fait votre question, mais j’ai l’impression que vous souhaitez traiter les propriétaires d’appartements (les utilisateurs propriétaires d’appartements et pouvant posséder de nombreux appartements) différemment des occupants d’habitation (les utilisateurs occupant des appartements et ne pouvant occuper qu’un seul appartement). . Vous ne pourrez faire cela que si vous stockez des propriétaires et des occupants d'appartements dans différents domaines, ce qui semble être le cas. 

2
Old Pro

Votre comportement souhaité n'est pas clair pour moi. Vous choisissez des appartements ou des personnes? Pourquoi désactivez-vous les appartements lorsque vous souhaitez autoriser la sélection de personnes occupant les appartements? 

Je pense que vous voulez probablement simplement désactiver les lignes basées sur le user_id, vous donnant quelque chose comme 

ng-disabled="selectedUserMapIdArray.indexOf(flat.user_map_id) >= 0 && !flat.isChecked"
1
Old Pro

depuis votre première méthode: "désactiver toutes les lignes avec le même identifiant"

vous pouvez mettre une fonction onClick dans laquelle vous pouvez exécuter du code (avec un délai de 10 ms pour vous assurer que votre première fonction de désactivation est terminée), envoyez $ cet élément dans la fonction et activez à nouveau cette case.

dans cette méthode, lorsque vous cliquez sur une case à cocher, toutes les mêmes cases sont désactivées, puis la case sur laquelle vous cliquez est réactivée. 

0
molikh

Vous ne pouvez pas décocher les cases avec la même propriété id, car id est unique, essayez de changer la valeur de ng-model de true à false

0
Chandra Upendra