【发布时间】：2015-10-12 20:23:19
【问题描述】：
我有一个项目，我在其中选择一个民意调查（问题），下一页我会看到带有提交按钮的这些问题的选项/选择，然后显示结果。 我的目标是实现或使用 Angular 的材料设计指南。我设法为问题页面和结果页面设置了主题。我被困在选择页面。 我到处都看了，我就是不知道问题是什么。我可以使用材料单选按钮来显示它，甚至可以在它旁边显示选择文本。我还设置了一条错误消息，如果您在未选择选项的情况下点击提交，则会显示一条消息，显示“首先选择一个选项”。当我在页面上选择 md 单选按钮后点击提交时，我不断收到错误消息。我什至设置了它，所以我有一个 HTML5 格式的常规单选按钮和一个 md 单选按钮。使用常规单选按钮进入下一个选项提交页面。
请指导我。
<--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），然后点击提交，看看会发生什么。
【问题讨论】：
-
当您提交时，服务器上会出现什么问题？尝试在 chromw webdeveloper 工具“网络”中检查 F12
-
我的常规单选按钮说 2 个请求并处理它。但是 md-radio-button 说 no requests caotured ，重新加载页面以查看网络下的详细信息。这是点击提交。该应用程序的作用是，您有一个投票问题，然后您可以选择一个并提交，它会在下一页显示该问题的所有投票。但我无法使用角度单选按钮移至第二页。
标签： javascript angularjs html material-design angular-material