如何从角度Js中的html中的单选按钮获取选定的值答案

【问题标题】：how to get selected value from radio button from html in angular Js如何从角度Js中的html中的单选按钮获取选定的值
【发布时间】：2017-04-16 04:15:39
【问题描述】：

我尝试从单选按钮获取选定的值但是当我选择老师时，它仍然是“学生”

HTML 文件：

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

<head>
<title>Sign UP Page</title>
<script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.js"></script>
	<script src="RigesterationController.js"></script>
</head>
<body >

<center>

<p>Enter Your User Name :	<input type="text" , name="UserName" id ="UName"  required /> </p>
<p>Enter Your Email :	<input type="text" , name="Email" id ="email" required /> </p>
<p>Enter Your Password :	<input type="password" , name="pass" id ="Pass" required/> </p>
<p>Choose Gender : <br> Male<input type="radio" name="gender" value="m" id="Gender" checked/>    Female<input type="radio" name="gender" value="f" id="Gender"/> </p>
<p>Choose User Type :<br>  Student<input type="radio" name="UserType" value="s" id="Utype"  checked/>     Teacher<input  type="radio" name="UserType" value="t" id="Utype"/> </p>

<div ng-app="phase2" >
	<div ng-controller="SignUP">
		<input type="button" name="signup" value="SignUP" ng-click="save()" />
	</div>
</div>
</center>
</body>
</html>

RigesterationController.js 文件：

var app = angular.module("phase2" , [])
app.controller( "SignUP" ,function ($scope , $http , srvShareData , $location)
		{
			$scope.dataToShare = [];
			$scope.save = function() {
				var email= document.getElementById("email").value;
				var UName=document.getElementById("UName").value;
				var Pass=document.getElementById("Pass").value;
				var gender=document.getElementById("Gender").value;
				var UserType=document.getElementById("Utype").value;
				alert(UserType)
				$http.get('http://localhost:8090/SignUp/'+email+'/'+UName+'/'+Pass+'/'+gender+'/'+UserType)
				.then(function(response)
					{
					});
				if (UserType=="t")
				{
				window.location.href="http://localhost:8060/TheAngular_Project/TeacherPage.html";
				}
				else if (UserType=="s")
				{
				window.location.href="http://localhost:8060/TheAngular_Project/StudentPage.html";
				}
				}
		});

虽然我选择了老师，但我总是得到 .. 如何获得选定的值？提前谢谢

【问题讨论】：

document.getElementById("email").value ？改用 ng-model 值
电子邮件和用户名和密码工作成功.. 单选按钮@Sajeetharan 中的问题
@AhmedHassan 我建议你先阅读角度。你做错了基础

标签： javascript html angularjs radio-button

【解决方案1】：

一些建议：

为什么ng-app="phase2" 两次？
- ng-app 指令用于自动引导 AngularJS 应用程序。根据 AngularJS 文档，每个 HTML 文档只能自动引导一个 AngularJS 应用程序。
为什么ng-controller 指令仅在提交按钮上作为表单字段（输入元素）也是表单的一部分？
- 它应该出现在父元素上。
为什么要使用 Javascript 来获取表单数据，因为您可以使用 ng-model 或其他角度 directives 在控制器和视图之间进行通信？
- 您可以使用 ng-model 将表单数据传递到控制器中，因为它是 AngularJS 中非常流行且强大的功能，而不是以错误的方式进行。

演示

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

myApp.controller('SignUP', function($scope) {
    $scope.save = function(selectedUser) {
      alert(selectedUser);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="phase2" ng-controller="SignUP">
<form name="myForm" ng-submit="save(uType)">
<p>Choose User Type :<br>Student<input type="radio" name="UserType" value="s" ng-model="uType"/>Teacher<input type="radio" name="UserType" value="t" ng-model="uType"/></p>
<input type="submit" name="signup" value="SignUP"/>
</form>
</div>

【讨论】：