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-model预先选择正确的复选框以及如何将新（和旧）值赋予changeSource（）。有没有一种优雅的方式呢？

示例（仅限伪代码）：

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

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

[ ] test1 [x] test2

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

Answer 1

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

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

这是一名工作人员link

Answer 2

您好，这可能有助于您获得新的＆amp;旧的价值。

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

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

3 个答案: