Получить выбранные значения группы флажков Angular 1.6 - PullRequest
0 голосов
/ 19 декабря 2018

Моя цель состоит в том, чтобы иметь набор флажков, где пользователи будут делать выбор, и когда они нажмут кнопку отправки, я выведу на консоль то, что они выбрали.

Моя проблема в том, что я не могуКажется, чтобы получить данные из группы флажков в моем 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, которые были проверены.

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Другой подход:

<ul>
  <li ng-repeat="game in games">
    <input type="checkbox" ng-model="selected[game.id]"> {{game.game}}
  </li>
</ul>
$scope.selected = {};
0 голосов
/ 19 декабря 2018

Самый простой подход может быть ...

<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 - ноЯ не вижу здесь большого недостатка, пока списки не слишком велики.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...