Question

我正在Angularjs中编写一个简单的调查应用程序，并希望捕获单选按钮选择的结果并将答案存储在控制器内的数组中。我有一个问题对象数组，每个对象都有一个正文字段和一个选择字段，其中包含用于选择的字符串值。我试图用'ng-model'属性绑定所选单选按钮的值。我似乎无法从控制器中访问此值。

这是index.html文件：

<!doctype html>
<html ng-app="estimatorApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">    </script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="QuestionListCtrl">

    {{question}} <br/>
    <ul>
        <li ng-repeat="choice in questions[q_counter].choices">
            <input type="radio" ng-model="answer" ng-click="next()" \
                ng-value="name" name="answer"> {{choice}} <br/>
        </li>

    </body>
</html>

这是'controller.js'文件：

var estimatorApp = angular.module('estimatorApp', [])
estimatorApp.controller('QuestionListCtrl', function ($scope) {
    $scope.questions = [
        {'body': 'What kind of app do you want to build?',
         'choices': ['iOS', 'Android', 'Mobile Web'] },
        {'body': 'Have you already started development?',
         'choices': ['yes', 'no'] }
    ];
    $scope.q_counter = 0;
    $scope.question = $scope.questions[$scope.q_counter]['body'];
    $scope.answers = []
    $scope.answer = ""

    $scope.next = function() {
        if ($scope.q_counter < $scope.questions.length-1) {
            console.log("answer: " + $scope.answer); // $scope.answer is undefined
            $scope.q_counter += 1;
            $scope.question = $scope.questions[$scope.q_counter]['body'];
        } else {
            console.log($scope.answers);
        }
    }

});

一旦我能够捕获输入的结果，我将把它推到$ scope.answers数组的末尾来存储它。

Answer 1

如果需要，您可以直接使用answers数组。您已经有了一个与q_counter一起使用的索引，所以这很简单。

我添加的内容为ng-model="answers[q_counter]"，并使用value="{{choice}}"设置值。

这是updated plunker。

<强> JS：

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

app.controller('QuestionListCtrl', function($scope) {

  $scope.questions = [
        {'body': 'What kind of app do you want to build?',
         'choices': ['iOS', 'Android', 'Mobile Web'] },
        {'body': 'Have you already started development?',
         'choices': ['yes', 'no'] }
    ];
    $scope.q_counter = 0;
    $scope.question = $scope.questions[$scope.q_counter]['body'];
    $scope.answers = []
    $scope.answer = ""

    $scope.next = function() {
        if ($scope.q_counter < $scope.questions.length-1) {
            console.log($scope.answers); // $scope.answers is the full list of answers
            $scope.q_counter += 1;
            $scope.question = $scope.questions[$scope.q_counter]['body'];
        } else {
            console.log($scope.answers);
        }
    }
});

<强> HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="QuestionListCtrl">
    <h1>Hello Plunker!</h1>


    {{question}} <br/>
    <ul>
        <li ng-repeat="choice in questions[q_counter].choices">
            <input type="radio" ng-model="answers[q_counter]" ng-change="next()" value="{{choice}}" name="answer"> {{choice}} <br/>
        </li>
    </ul>
  </body>

</html>

如何获取控制器中用户选择的单选按钮的值？

1 个答案: