Javascript 使用基于两个对象数组的AngularJS在中显示复选框

我知道已经有几个类似的主题了，但我发现没有一个真正符合我的问题

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

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

到目前为止，我得到的是：

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

及

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

[ ] test1 [x] test2

---

其中，源中的所有元素都是复选框，而所选源中的元素是预选的。选择的更改可以作为对象存储在选定的源中，并且必须触发我的changeSource功能，以便我可以通知我的服务器。

您好，这可能有助于您获取新值和旧值

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

---

我不太明白你的问题，但如果我没弄错的话，你只想用第一个集合中的选定项目填充第二个集合，对吗？如果是这样，您可以将第二个集合转换为一个返回函数，其中包含第一个集合的过滤器，如下所示：

在控制器中：

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>

---

在源阵列中的每个对象内的属性中设置选定/未选定状态根据选定阵列中的内容对其进行初始化

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

---

这是一个可以工作的便当

谢谢。我要做的是为第一个数组中的每个对象显示一个复选框，并选中该项目也在第二个数组中的每个复选框。对不起@CodeO。你能提供一个例子，说明你正在努力实现一个图像、模板或类似的东西吗？没问题，仍然感谢你的帮助。我在上面的问题中添加了一个示例，谢谢，但是sources数组中的值不应该真正改变。我只想显示每个项目的复选框。处理这个问题的最简单方法是使用一个数组，每个项目对应于它的选定状态，并带有一个额外的字段。这在你的情况下会起作用吗？最终这似乎是最清晰的答案。我几乎就是这样实现的。谢谢你，谢谢所有其他的答案。

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

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