Я просматриваю кривую обучения с помощью AngularJs, и я нахожу, что практически нет примеров, которые могут использоваться в реальном мире.
Я пытаюсь получить четкое представление о том, как отправить форму с помощью большинства стандартных компонентов и передать ее в файл PHP.
Моя скрипка .
У кого-нибудь есть хорошие примеры при подаче простых, незагрязненных форм, которые помогут мне и, возможно, многим другим начинающим Angularjs.
Когда я говорю чистую форму, я имею в виду что-то вроде этого ..
<div ng-app="myApp"> <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()"> First name: <br/><input type="text" ng-model="form.firstname"> <br/><br/> Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea> <br/><br/> <input type="radio" ng-model="form.gender" value="female" />Female ... <input type="radio" ng-model="form.gender" value="male" />Male <br/> <br/><br/> <input type="checkbox" ng-model="form.member" value="5"/> Already a member <br/><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/> <!-- <button ng-click="save()" >Save</button> --> <input type="submit" ngClick="Submit" > </form> </div> Мой код ng-app …
var app = angular.module('myApp', []); app.controller('FormCtrl', function ($scope, $http) { var formData = { firstname: "default", emailaddress: "default", textareacontent: "default", gender: "default", member: false, file_profile: "default", file_avatar: "default" }; $scope.save = function() { formData = $scope.form; }; $scope.submitForm = function() { console.log("posting data...."); formData = $scope.form; console.log(formData); //$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/}); }; });
Я думаю, что три вопроса, которые я имею здесь, это …
Я готов принять любую четкую и краткую информацию и собрать хороший пример обучения для всех …
Моя скрипка
Я переписал вашу скрипту 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. Хотя обычно все альтернативы работе «Угловой способ», подача формы перехватывается и отменяется с помощью Angular, чтобы вы могли манипулировать данными и отправлять их вручную.
Хотя обратите внимание, что есть проблема с любым типом ajax / http post / get в jsFiddle, поэтому вам придется запускать его локально.
Общие рекомендации по подаче угловой формы см. Здесь: http://docs.angularjs.org/cookbook/advancedform В поваренной книге для углового есть много примеров кода, которые помогут, поскольку документы не очень удобны для пользователя.
Знайте, что Angularjs изменяет весь процесс веб-разработки, не пытайтесь делать что-то, как вы привыкли, с JQuery или обычным html / js, но для всего, что вы делаете, посмотрите вокруг примерного кода, так как почти всегда есть угловая альтернатива.
Я проводил довольно много исследований и в попытке решить другую проблему, в конце концов, я пришел к хорошей части решения на моем другом посту:
Angularjs – Form Post Данные не отображаются?
Решение не включает загрузку изображений в настоящее время, но я намерен расширить и создать четкий и хорошо работающий пример. Если обновление этих сообщений возможно, я буду держать их в курсе до тех пор, пока не будет составлен стабильный и простой в освоении пример.
Отправка данных на некоторую страницу обслуживания.
<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, без необходимости создания представления. Если вы заинтересованы в отправке формы, вы можете написать директиву, завершающую вашу форму, которая обрабатывает нажатия клавиш ввода и кнопки SUBMIT и вызывает форму form.submit ().
Если вы хотите получить исходный код примера такой директивы, пожалуйста, дайте мне знать, комментируя это. Я понял, что это простая директива, которую вы можете написать сами.