Angularjs - простая форма отправить

Я переживаю кривую обучения с помощью AngularJs, и я нахожу, что практически нет примеров, которые могут использоваться в реальном мире.

Я пытаюсь получить четкое представление о том, как отправить форму с помощью самых стандартных компонентов и передать ее в файл PHP.

Мой fiddle.

Есть ли у кого-нибудь хорошие примеры при подаче простых, незагрязненных форм, которые помогут мне и, возможно, многим другим начинающим 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-приложения...

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 файле)?
  • Как я могу поставить значение флажка, если флажок установлен?
  • Я нахожу много информации, используя jQuery с Angular для отправки изображений. Я вижу, что в этом представлении есть объект изображения, как я могу получить эти данные? Каковы соображения, связанные с образами?

Я готов принять любую четкую и краткую информацию и собрать хороший пример обучения для всех...

Мой fiddle

Ответы

Ответ 1

Я проводил довольно много исследований и в попытке решить другую проблему, я оказался в хорошей части решения на моем другом посту здесь:

Angularjs - Форма Опубликовать данные не размещены?

В настоящее время решение не включает загрузку изображений, но я намерен расширить и создать четкий и хорошо работающий пример. Если обновление этих сообщений возможно, я буду держать их в курсе до тех пор, пока не будет скомпилирован стабильный и простой в освоении пример.

Ответ 2

Я переписал вашу скрипту 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>

Посмотрите, что я использую множество директив angular (ng-controller, ng-model, ng-submit), где вы планируете использовать базовую форму представления html. Хотя обычно все альтернативы работе "angular", представление формы перехватывается и отменяется с помощью angular, чтобы вы могли манипулировать данными и отправлять их вручную.

Обратите внимание, что существует проблема с любым типом ajax/http post/get в jsFiddle, поэтому вам придется запускать его локально.

Общие рекомендации по представлению формы angular см. здесь: http://docs.angularjs.org/cookbook/advancedform В кулинарной книге для angular есть много примеров кода, которые помогут, поскольку документы не очень удобны для пользователя.

Знайте, что Angularjs меняет весь процесс веб-разработки, не пытайтесь делать что-то, как вы привыкли, с JQuery или обычным html/js, но для всего, что вы делаете, посмотрите вокруг примерного кода, так как есть почти всегда альтернатива angular.

Ответ 3

Отправка данных на некоторую страницу обслуживания.

<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;
                    });
            }

Ответ 4

Я думаю, причина, по которой AngularJS мало говорит о представлении формы, потому что она больше зависит от "двусторонней привязки данных". В традиционной разработке html у вас был один способ привязки данных, т.е. После того, как DOM предоставил любые изменения, внесенные вами в элемент DOM, не отразился в объекте JS, однако в AngularJS он работает в обоих направлениях. Следовательно, на самом деле нет необходимости формировать подчинение. Я сделал приложение среднего размера, используя AngularJS, без необходимости создания представления. Если вы заинтересованы в отправке формы, вы можете написать директиву, завершающую вашу форму, которая обрабатывает нажатия клавиш ввода и кнопки SUBMIT и вызывает форму form.submit().

Если вы хотите получить исходный код примера такой директивы, пожалуйста, дайте мне знать, комментируя это. Я понял, что это простая директива, которую вы можете написать себе.