Question

我有一个项目，我选择一个民意调查（问题），下一页我会通过提交按钮显示这些问题的选项/选项，然后显示结果。我的目标是实现或使用angular的材料设计指南。我设法将问题页面和结果页面设为主题。我被困在选择页面。我到处寻找，我只是无法弄清问题是什么。我可以使用材料单选按钮显示使用，甚至旁边的选择文本。我还设置了一条错误消息，如果您在未选择选项的情况下点击提交，则会显示一条消息，显示“先选择选项”。当我在页面上选择md-radio-button后点击提交时，我不断收到错误消息。我甚至设置它，所以我有一个常规的单选按钮形式HTML5和一个md-radio-button除此之外。使用常规单选按钮进入选择提交的下一页。

请指导我。

<--THIS IS REGULAR RADIO BUTTON EXAMPLE WHICH WORKS-->
<!DOCTYPE html>
<html>
<head>
	<title>Choices</title>
</head>
<body>
	<h1>{{ poll.question }}</h1>
	{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
	<form action="{% url 'polls:vote' poll.id %}" method="post">
		{% csrf_token %}  
		{% for choice in poll.choice_set.all %}
		<input type="radio" name="choice" value="{{ choice.id }}" />
		{{ choice.choice_text }}<br> 		
		{% endfor %}
		<input type="submit" value="submit">

	</form>
</body>
</html>

var app = angular.module('app', ['ngAria', 'ngMaterial']);

app.controller('AppCtrl', ['$scope', function($scope){
  $scope.data = {

  };
}]);

<--THIS IS USING MATERIAL RADIO BUTTONS ALONG WITH MY JS FILE. I HAVE NOT ATTACHED MY CSS AS THAT ISNT IMPORTANT FOR THE SOLUTION.
<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.js">
	<script type="text/javascript" src="/static/js/app.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/css/styles.css">
	<title>Choices</title>
</head>
<body ng-app="app" ng-controller="AppCtrl">
	<h1 class="current_poll">{{ poll.question }}</h1>
	{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
	<form ng-submit="submit()" action="{% url 'polls:vote' poll.id %}" method="post">
		{% csrf_token %}  
		<md-radio-group ng-model="data.group1">
		{% for choice in poll.choice_set.all %}
    		<md-radio-button name="choice" value="{{ choice.id }}">{{ choice.choice_text }}<br></md-radio-button>
		{% endfor %}
		</md-radio-group>
		<form action="">
			<md-button type="submit" class="md-raised">Submit</md-button>
		</form>
	</form>
</body>
</html>

这就是我的结果。我点击第三个选项（它是一个民意调查应用程序，所以正确答案无关紧要：P）然后点击提交，看看会发生什么。

Answer 1

您使用嵌套表单 - 标记。这是无效的。

无法继续使用AngularJS材质单选按钮

1 个答案: