Question

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

我的问题是我似乎无法从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值。

Answer 1

另一种方法是：

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

$scope.selected = {};

Answer 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-但只要列表不是太大，我就不会在这里看到很大的缺点。

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

2 个答案: