AngularJs - 通过将选定对象列表绑定到所有对象列表来选择复选框答案

【问题标题】：AngularJs - Select checkboxes by binding list of selected objects to list of all objectsAngularJs - 通过将选定对象列表绑定到所有对象列表来选择复选框
【发布时间】：2017-12-30 06:08:27
【问题描述】：

我已寻找解决问题的方法，但未能找到正确答案。
我有一个所有个问题的列表和一个选定个问题的列表。我需要从所有问题列表中构建一个复选框列表，并检查所选问题列表中的复选框。当对复选框进行更改时，我需要相应更新所选问题的列表。所有问题的列表永远不会改变。我怎样才能做到这一点？这是我的情况的一个非常简短的版本：

        var MyApp = angular.module('MyApp', []);

        MyApp.controller('MyController', ['$scope', function ($scope) {

            $scope.allQuestions = [
                { q_id: 1, q_txt: 'What time is it?', q_sort: 1},
                { q_id: 2, q_txt: 'What is that?', q_sort: 2},
                { q_id: 3, q_txt: 'Who are you?', q_sort: 4},
                { q_id: 4, q_txt: 'What color is that?', q_sort: 3}
            ];

            $scope.selectedQuestions = [
                { q_id: 1, other_prop: 'yyy' },
                { q_id: 4, other_prop: 'zzz' },
            ];
        }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">

        <div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="x" /> {{ question.q_txt }}</div>

    </div>

在我的应用程序中，列表来自服务器，我希望能够在保存更改时将选定的问题列表作为对象返回给服务器。我无法弄清楚完成此操作的绑定，或者如何检查正确的复选框。请注意，这两个列表是不同的，但两者都有 q_id 值作为匹配它们的键。任何帮助将不胜感激。

【问题讨论】：

标签： angularjs checkbox

【解决方案1】：

在用户提交表单之前，您似乎不需要担心选择了哪些问题，所以我只需循环浏览当时所有问题的列表并创建一个选定问题的数组。

类似这样的：

function getSelections() {
    var selectedQuestions = []
    $scope.allQuestions.forEach( function(question) {
        if (question.selected) {
            var questionCopy = angular.copy(question)
            selectedQuestions.push(questionCopy)
        }
    })
    return selectedQuestions
}

然后在发布之前调用此函数并将结果传递给您的 API。

您应该能够使用 ng-model 来处理预选应该预选的复选框：

<div ng-repeat="question in allQuestions"><input type="checkbox" ng-model="question.selected" /> {{ question.q_txt }}</div>

【讨论】：

谢谢，迈克。你是对的，提交部分是简单的部分。我主要关心的是如何预先选择从数据库中选择的问题的复选框。
我对代码进行了编辑。我在测试时添加了“选定”属性，但在发布之前忘记将其删除。所有问题的列表将不具有该属性，因为它是系统中所有可用问题的列表。 selectedQuestions 列表表示选择的内容。对不起。
所以您从 API 收到了 2 个列表，一个是所有问题的列表，另一个是所选问题的列表？
没错。这些问题是较大对象的一部分，因此较大对象会为我提供为其选择的问题列表，我需要检查所有可用问题列表中的相应问题。
我添加了一个新答案。这里有太多无关紧要的讨论来冲洗你所追求的。解决后我会删除我原来的答案

【解决方案2】：

这样的事情应该可以解决问题。使用 array.find() 可能更有效。使用像 _ 这样的库会更容易。

   $scope.selectedQuestions.map( function(selectedQuestion) {
        var match = $scope.allQuestions.some( function(question) {
             if (question.q_id == selectedQuestion.q_id) {
                 question.selected = true
                 return true 
             }
             return false
        }
    }

【讨论】：