Я проводил довольно мало исследования и в попытке решить другой вопрос, я закончил тем, что пришел к хорошей части решения в моем другом сообщении сюда:
Angularjs - Данные Сообщения Формы, Не Отправленные?
решение в настоящее время не включает изображения загрузки, но я намереваюсь подробно остановиться и создать ясный и хорошо рабочий пример. Если обновление этих сообщений возможно, я усовершенствую их полностью, пока конюшня и легкий извлечь уроки из примера не будет скомпилирована.
, Если Вы ищете Угловой (v2 +, в настоящее время версия 8), попробуйте этот ответ или официальное руководство .
<час>я переписал Вашу скрипку JS здесь: http://jsfiddle.net/YGQT9/
<div ng-app="myApp">
<form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()">
First name: <br/><input type="text" name="form.firstname">
<br/><br/>
Email Address: <br/><input type="text" ng-model="form.emailaddress">
<br/><br/>
<textarea rows="3" cols="25">
Describe your reason for submitting this form ...
</textarea>
<br/>
<input type="radio" ng-model="form.gender" value="female" />Female
<input type="radio" ng-model="form.gender" value="male" />Male
<br/><br/>
<input type="checkbox" ng-model="form.member" value="true"/> Already a member
<input type="checkbox" ng-model="form.member" value="false"/> Not a member
<br/>
<input type="file" ng-model="form.file_profile" id="file_profile">
<br/>
<input type="file" ng-model="form.file_avatar" id="file_avatar">
<br/><br/>
<input type="submit">
</form>
</div>
Здесь я использую много угловых директив (ng-controller
, ng-model
, ng-submit
), где Вы использовали основное представление формы HTML. Обычно все альтернативы "Угловому пути" работа, но представление формы прерывается и отменяется Угловым, чтобы позволить Вам управлять данными перед представлением
, НО JSFiddle не будет работать правильно, поскольку это не позволяет типа ajax/http, отправляют/получают так, необходимо будет выполнить его локально.
Для общих рекомендаций по угловому представлению формы видят примеры поваренной книги ОБНОВЛЕНИЕ
, поваренной книги не стало. Вместо этого взгляните на 1.x руководство для для представление формы
, поваренная книга для углового имеет много примера кода, который поможет, поскольку документы не очень удобны для пользователя.
Angularjs изменяет Ваш весь процесс веб-разработки, не пытайтесь делать вещи путем, Вы привыкли к с JQuery или регулярным html/js, но для всего, что Вы действительно смотрите вокруг для некоторого примера кода, поскольку существует почти всегда угловая альтернатива.
Отправка данных к некоторой сервисной странице.
<form class="form-horizontal" role="form" ng-submit="submit_form()">
<input type="text" name="user_id" ng-model = "formAdata.user_id">
<input type="text" id="name" name="name" ng-model = "formAdata.name">
</form>
$scope.submit_form = function()
{
$http({
url: "http://localhost/services/test.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param($scope.formAdata)
}).success(function(data, status, headers, config) {
$scope.status = status;
}).error(function(data, status, headers, config) {
$scope.status = status;
});
}
Я думаю причина, AngularJS не говорит многое о представлении формы, потому что он зависит больше от 'двухсторонней привязки данных'. В традиционной разработке HTML у Вас был один путь привязка данных, т.е. после того как DOM представил любые изменения, Вы делаете к элементу DOM, не отражался в Объекте JS, однако в AngularJS, это прокладывает себе путь. Следовательно нет на самом деле никакой потребности сформировать представление. Я сделал середину размерного использования приложения AngularJS без потребности сформировать представление. Если Вы стремитесь отправить форму, можно записать директиву, оборачивающую форму, какие дескрипторы ВВОДЯТ keydown и события щелчка Кнопки отправки и называют form.submit ().
, Если Вы хотите демонстрационный исходный код такой директивы, сообщите мне путем комментария этого. Я выяснил, что это будет простая директива, чтобы можно было записать себя.
var app = angular.module( "myApp", [] );
app.controller( "myCtrl", ["$scope", function($scope) {
$scope.submit_form = function(formData) {
$scope.formData = formData;
console.log(formData); // object
console.log(JSON.stringify(formData)); // string
$scope.form = {}; // clear ng-model form
}
}] );
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="submit_form(form)" >
Firstname: <input type="text" ng-model="form.firstname" /><br />
Lastname: <input type="text" ng-model="form.lastname" /><br />
<hr />
<input type="submit" value="Submit" />
</form>
<hr />
<p>Firstname: {{ form.firstname }}</p>
<p>Lastname: {{ form.lastname }}</p>
<pre>Submit Form: {{ formData }} </pre>
</div>