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

How do I get the value of a user-selected radio button in the controller?

本文关键字：选择 用户 单选按钮 控制器 何获取 获取      更新时间：2023-09-26

我正在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="answerswer" ng-click="next()" '
                ng-value="name" name="answerswer"> {{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("answerswer: " + $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数组的末尾来存储它。

如果需要，可以直接使用answers数组。您已经有了一个可用于q_counter的索引，所以这是非常直接的。

我添加的是ng-model="answerswers[q_counter]"和用value="{{choice}}"设置值。

这是一个更新的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="answerswers[q_counter]" ng-change="next()" value="{{choice}}" name="answerswer"> {{choice}} <br/>
        </li>
    </ul>
  </body>
</html>
相关文章：