Question

我有一个包含所有数据的大清单，我有另一个只包含所选数据的较短列表。最初，选择了所有数据，因此两个列表都是相同的，用户必须取消选中不需要的数据的复选框，然后未选中的数据必须从selected_data_list中消失。

加载页面时，正确填充了两个列表。但是，当我取消选中不需要的数据时，selected_data_list不会更新。

我尝试使用$ scope。$ apply（），但它给了我这个错误：

错误：$ rootScope：inprog 行动已在进行中

这是我的代码：

完整清单：

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

选定的地区列表：

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

控制器：

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

    };

});

这是jsfiddle 谢谢。

Answer 1

请查看此代码，并告诉我它是否能解决您的问题。另请，请查看示例方案中的plnkr。

模板：

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

控制器：

{{1}}

Answer 2

尝试使用 $ rootScope 。因为你为两个div提供 ng-controller =“BrainRegionsCtrl”，这就是 $ scope.selected_brain_regions 将进入第二个div中的初始状态的原因。

OR

你应该将 ng-controller =“BrainRegionsCtrl”提供给包含代码两部分的根div ..

Answer 3

AngularJS承诺已在其回调中调用.apply（）。你不能在回调中再次调用.apply，因为它们已经被应用了，并且错误＆＃34; In Progress＆＃34;准确地说明了。只需删除.apply调用即可，除非您有其他错误。

Answer 4

您的问题是因为索引更新，因此请尝试使用track by $index。

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

查看jsFiddle

刷新ng-repeat数据

完整清单：

选定的地区列表：

控制器：

4 个答案: