Angularjs-простая форма отправки
Я прохожу кривую обучения с 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>
мой код НГ-приложения...
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*/});
};
});
Я думаю, что три вопроса у меня есть отсюда...
- как мой php-файл должен взаимодействовать с этим (как я могу получить строку JSON в массив в php-файл)?
- как я могу отправить значение флажка, когда флажок установлен верно?
- Я нахожу много информации abotu с помощью jQuery с помощью Angular для отправки изображений, я вижу, что в этом представлении уже есть объект изображения, как мне получить эти данные? Какие соображения следует включать в изображения?
Я готов взять любую четкую и краткую информацию и собрать хороший пример обучения для всех...
мой скрипка
4 ответов:
я переписал вашу скрипку 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 В поваренной книге для angular есть много примеров кода, которые помогут, поскольку документы не очень удобны для пользователя.
знайте, что 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-Форма Post Данные Не Опубликованы?
решение не включает загрузку изображений в настоящее время, но я намерен расширить и создать четкий и хорошо работающий пример. Если обновление этих сообщений возможно, я буду держать их в курсе всего пути до стабильной и простой в освоении из примера компилируется.
Я думаю, что причина AngularJS не говорит много о представлении формы, потому что это больше зависит от "двусторонней привязки данных". В традиционной разработке html у вас был один способ привязки данных, т. е. после того, как DOM визуализировал любые изменения, внесенные в элемент DOM, не отражались в объекте JS, однако в AngularJS он работает в обоих направлениях. Следовательно, на самом деле нет необходимости формировать представление. Я сделал приложение среднего размера с помощью AngularJS без необходимости формировать представление. Если вы хотите отправить форму вам можно написать директиву обертывание формы, которая обрабатывает ENTER keydown и отправить кнопку нажмите события и вызов формы.представлять.)(
Если вы хотите образец исходного кода такой директивы, пожалуйста, дайте мне знать, комментируя это. Я понял, что это будет простая директива, которую вы можете написать сами.
Comments