获取复选框组Angular 1.6的选定值答案

【问题标题】：Get selected values of checkbox group Angular 1.6获取复选框组Angular 1.6的选定值
【发布时间】：2018-12-19 16:25:41
【问题描述】：

我的目标是有一组复选框，用户将在其中进行选择，当他们点击提交按钮时，我会将他们选择的内容打印到控制台。

我的问题是我似乎无法从我的 Javascript 中的复选框组中获取数据。我试图创建一个最小的可重现示例，但我什至无法让 ng-repeat 在 jsfiddle 上工作：-S jsfiddle

我想用ng-repeat创建一堆复选框

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="answers.games" value="{{game.game_id}}">{{game.game}}
  </li>
</ul>

在 javascript 方面我有类似的东西

(function() {
    var app = angular.module('myApp', []);

    app.controller('playController', function($scope, $rootScope, $http){
        getWeeks();

        $scope.games = [
        {game_id: 1, game: "Game 1"},
        {game_id: 2, game: "Game 2"},
        {game_id: 3, game: "Game 3"}
        ]

        $scope.score_submission = function(){
            console.log($scope.answers)
        }
    })
})();

但是，复选框并没有像我想象的那样绑定到$scope.answers，相反，$scope.answers 仍未定义。我想要返回的是已检查的 game_id 值的数组。

【问题讨论】：

我的第一个问题是，为什么要使用已弃用的库而不是 Angular？
因为我以前用过它，我要避免学习太多新东西。
如果您愿意，可以尝试其他方法。 stackoverflow.com/questions/14514461/…

标签： javascript angularjs

【解决方案1】：

另一种方法是：

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="selected[game.id]"> {{game.game}}
  </li>
</ul>

$scope.selected = {};

【讨论】：

跟进，我注意到如果我选中一个框然后取消选中它，它不会从 $scope.selected 中删除 - 我需要做什么才能启用该行为？
取消选中复选框时。 ng-model 指令将属性设置为false。它不会删除它。您可以使用ng-false-value 指令将其设置为另一个值。如果您愿意，可以使用 ng-change 指令删除该属性。

【解决方案2】：

最简单的方法可能是……

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="game.isSelected"> {{game.game}}
  </li>
</ul>

在您的控制器中：

    $scope.score_submission = function(){
        $scope.answers = [];
        for(var i=0; i < $scope.games.length) {
            if($scope.games[i].isSelected) $scope.answers.push($scope.games[i].game_id);
        }
    }

此解决方案唯一的小缺点是您操纵 $scope.games - 但只要列表不太大，我认为这里没有很大的缺点。

【讨论】：