CODEWITHSUNDEEP
angularjs
The Maestro
The Maestro

Reputation: 689

Refresh ng-repeat data

I have a big list containing all of my data, and I have another shorter list containing only the selected data. Originally, all the data is selected so both lists are identical, and the user must uncheck the checkbox of the unwanted data, and then the unchecked data must disappear from the selected_data_list.

When the page is loaded, the two lists are being filled correctly. But when I uncheck the unwanted data, the selected_data_list is not updating.

I tried to use $scope.$apply(), but it gave me this error:

Error: $rootScope:inprog Action Already In Progress

Here is my code:

Complete list:

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

Selected regions list:

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

Controller:

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

    };

});

Here is a jsfiddle Thank you.

Upvotes: 4

Views: 2572

Answers (4)

eng.mariamalkassar92
eng.mariamalkassar92

Reputation: 140

Just try to use $rootScope. Because you give the ng-controller="BrainRegionsCtrl" for two div that's why the $scope.selected_brain_regions will go to the initial state in the second div.

OR

you should give the ng-controller="BrainRegionsCtrl" to the root div which contains the two parts of your code..

Upvotes: 1

Immanuel Kirubaharan
Immanuel Kirubaharan

Reputation: 1094

Please check with this code and let me know whether it solves your issue. Also please check this working plnkr of your example scenario.

Template:

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

Controller:

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

Upvotes: 1

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Your issue because of index update, so try track by $index, should work.

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

Check out jsFiddle

Upvotes: 0

Славік Багдай
Славік Багдай

Reputation: 21

AngularJS promises already call .apply() on their callbacks. You cannot call .apply again inside the callbacks since they're already being .applied, and the error "In Progress" tells exactly that. Just remove the .apply call and it will work, unless you have further errors.

Upvotes: 0

Related Questions