根据两个对象数组显示与AngularJS中的复选框

Question

我知道已经有几个类似的主题，但我没有发现与我的问题真正匹配的问题。

当打开我的AngularJS应用程序/网站时，我加载两个对象数组（都是相同类型）。一个列表包含所有可能的值（这里称为源），另一个列表是第一个元素的选择。

我的目标是将所有来源显示为复选框。第二个列表中的那些必须预先选定，其余的不是。现在用户可以选择/取消选择复选框。如果他这样做，我需要通知服务器（使用source.id）。

我走到这一步：

exampleApp.controller('testController', [ '$scope', '$http', function($scope, $http) { 
     $scope.sources = []; 
     $scope.selectedSources = []; 
     $scope.changeSource = function(source) {...}; 
    }) 

和

<div ng-repeat="source in sources"> 
      <input 
        type="checkbox" 
        name="source.name" 
        value="{{source.id}}" 
        ng-model="??" 
        ng-change="changeSource(source.id)" 
      > {{source.name}} 
     </div> 

我不出来什么是我能得到NG-模型预选正确的复选框，以及如何获得将新（和旧）值更改为changeSource（）。有没有一个优雅的方式来做到这一点？

例（伪代码只）：

Sources = [{id=1, name=test1},{id=2, name=test2}, ...] 
SelectedSources = [{id=2, name=test2}] 

现在我需要的是复选框这样的：

[ ] test1 [x] test2 

，其中来自源的所有元素的复选框，并从selectedsources的那些被预先选择。选择的更改可以存储在选定的源（作为对象）中，并且必须触发我的changeSource（）函数，以便通知我的服务器。

Answer 1

在Sources数组中的每个对象内的属性中设置选定/未选中状态（根据selectedArray中的内容对其初始化）

$scope.sources.forEach(function(source) { 
    source.selected = isSelected(source); 
    }) 

function isSelected(selectedSource) { 
    return !!$scope.selectedSources.find(function(s) { 
     return s === selectedSource || s.id == selectedSource.id; 
    }) 
    } 

这里有一个工作plunker link

Answer 2

嗨，这可能会帮助你获得新的&旧价值。

$scope.$watch('sources', function (oldval, newval) { 
    console.log(oldval + newval); 
}); 

Answer 3

我不明白你的问题非常好，但如果我没有记错的话，你想只从第一个选定的项目来填补第二集中，对不对？如果是的话，你可以把你的第二个集合与第一内部的过滤器的返回功能，如下所示：

在你的控制器：

exampleApp.controller('testController', [ '$scope', '$http', function ($scope, $http) { 
    $scope.sources = []; 
    /* ... */ 
    $scope.getSelectedSources = function() { 
     return $scope.sources.filter(function (val) { 
      return val.selected; 
     }); 
    }; 
}) 

在模板：

<div ng-repeat="source in sources"> 
    <input 
      type="checkbox" 
      name="source.name" 
      value="{{source.id}}" 
      ng-model="source.selected" 
      ng-change="changeSource(source.id)" 
    > {{source.name}} 
</div> 

<div ng-repeat="source in getSelectedSources()"> 
    <input 
      type="checkbox" 
      name="source.name" 
      value="{{source.id}}" 
      ng-model="source.selected" 
      ng-change="changeSource(source.id)" 
    > {{source.name}} 
</div>