Невозможно продолжить работу с переключателями AngularJS Material

0

У меня есть проект, в котором я выбираю опрос (вопрос), на следующей странице мне представлены варианты/варианты для этих вопросов с помощью кнопки отправки, а затем выводятся результаты. Моя цель - материализовать или использовать руководящие принципы проектирования угловых материалов. Мне удалось разделить тему и страницу результатов. Я застрял на странице выбора. Я везде искал, и я просто не могу понять, в чем проблема. Я мог бы получить кнопки материала, чтобы показывать, используя и даже тексты выбора рядом с ним. У меня также есть сообщение об ошибке, в котором, если вы нажали submit без выбора опции, вы получите сообщение с надписью "Сначала выберите вариант". Когда я нажимаю submit после выбора 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), а затем нажмите "Отправить" и посмотрите, что произойдет.

Изображение 174551

Изображение 174551

  • 0
    Что попадает на сервер, когда вы отправляете? Попробуйте проверить с помощью F12 в chromw webdeveloper tools "сеть"
  • 0
    Мои обычные радиокнопки говорят 2 запроса и обрабатывают его. Но md-radio-button говорит, что нет запросов, перезагрузите страницу, чтобы увидеть подробную информацию в сети. Это по щелчку отправить. Приложение работает, у вас есть вопрос, который представляет собой опрос, а затем вы можете выбрать один из них и отправить его, и он покажет вам все голоса по этому вопросу на следующей странице. Но я не могу перейти на вторую страницу, используя угловые радиокнопки.
Теги:
angular-material
material-design

1 ответ

0

Вы используете вложенный тег формы. Это неверно.

Поделиться
  • 0
    Хорошо, так как мне это исправить? Первый тег формы должен иметь это действие
  • 0
    Просто удалите внутренний тег формы
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню