Rafraîchir les données ng-repeat

Question

J'ai une grande liste contenant toutes mes données, et j'ai une autre liste plus courte contenant uniquement les données sélectionnées. À l'origine, toutes les données sont sélectionnées, de sorte que les deux listes sont identiques. L'utilisateur doit décocher la case des données non souhaitées, puis les données décochées doivent disparaître de la liste selected_data_list.

Lorsque la page est chargée, les deux listes sont remplies correctement. Mais lorsque je décoche les données indésirables, la liste selected_data_list n'est pas mise à jour.

J'ai essayé d'utiliser $scope.$apply(), mais cela m'a donné cette erreur :

Erreur : $rootScope:inprog Action déjà en cours

Voici mon code :

Liste complète :

<div ng-controller="BrainRegionsCtrl">

    <div ng-repeat="region in brain_regions">

        <label> 

           <input type="checkbox"
              name="checkbox_brain_region__included"
              id="checkbox_brain_region_{/region.id/}"
              value="{/region.id/}"              
              ng-model="region.show"
              ng-change="update_selected_Brain_regions(region)">                           

           <b>{/region.name/}</b>

         </label>

    </div>
</div>

Liste des régions sélectionnées :

<div ng-controller="BrainRegionsCtrl">

    <label ng-repeat="region in selected_brain_regions">
        <input type="radio" name="radio_brain_regions_graphical_search_soma" value="{/region.id/}">
        <b>{/region.name/}</b>
    </label>

 </div>

Contrôleur :

ngApp.controller('BrainRegionsCtrl', function ($scope, $http) {

    $scope.brain_regions = [];
    $scope.selected_brain_regions = [];               

    $scope.update_selected_Brain_regions = function (region) {

        for (var i = 0; i < $scope.brain_regions.length; i++) {
            var current_region = $scope.brain_regions[i];
            if (current_region.id === region.id) {
                if (region.show) {
                    $scope.selected_brain_regions.push(current_region);
                }
                else {
                    $scope.selected_brain_regions.splice(i,1);
                }
            }
        }
        console.log($scope.selected_brain_regions);

    };

});

Voici un jsfiddle Merci.

Answer 1

Veuillez vérifier avec ce code et me faire savoir si cela résout votre problème. Veuillez également vérifier ce fonctionnement plnkr de votre scénario d'exemple.

Modèle :

    <div ng-repeat="region in brain_regions">
        <label>
           <input type="checkbox"
              name="checkbox_brain_region[$index]"
              id="checkbox_brain_region[region.id]"
              value="region.id"              
              ng-model="region.show"
              ng-change="update_selected_Brain_regions(region)">                           
           <b>{{region.name}}</b>
         </label>
    </div>
    <br>
    <label ng-repeat="region in selected_brain_regions">
        <input type="radio" name="radio_brain_regions_graphical_search_soma[$index]"
        ng-model="region.show" value="region.id">
        <b>{{region.name}}</b>
    </label>

Contrôleur :

$scope.update_selected_Brain_regions = function (region) {
    for (var i = 0; i < $scope.brain_regions.length; i++) {
        var current_region = $scope.brain_regions[i];
        if (current_region.id === region.id) {
            if (region.show) {
                $scope.selected_brain_regions.push(current_region);
            } else {
                var index = $scope.selected_brain_regions.map(function(x){ return x.id; }).indexOf(current_region.id);
                $scope.selected_brain_regions.splice(index,1);
            }
        }
    }
};

Answer 2

Essayez juste d'utiliser $rootScope . Parce que vous donnez à la ng-controller="BrainRegionsCtrl" pour deux div c'est pourquoi le $scope.selected_brain_regions ira à l'état initial dans la deuxième division.

OU

vous devez donner à la ng-controller="BrainRegionsCtrl" à la div Root qui contient les deux parties de votre code

Answer 3

Les promesses AngularJS appellent déjà .apply() sur leurs callbacks. Vous ne pouvez pas appeler .apply à nouveau à l'intérieur des callbacks puisqu'ils sont déjà appliqués, et l'erreur "In Progress" l'indique exactement. Supprimez simplement l'appel .apply et cela fonctionnera, à moins que vous n'ayez d'autres erreurs.

Answer 4

Votre problème est dû à la mise à jour de l'index, essayez donc track by $index devrait fonctionner.

<label ng-repeat="region in selected_brain_regions track by $index">
    <input type="radio" name="radio_brain_regions_graphical_search_soma" value="{{region.id}}">
    <b>{{region.name}}</b>
</label>

Vérifiez jsFiddle