63
задан 17 September 2015 в 14:25

5 ответов

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

Angularjs - Данные Сообщения Формы, Не Отправленные?

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

2
ответ дан 31 October 2019 в 13:00

ПРЕДУПРЕЖДЕНИЕ Этого для Углового 1.x

, Если Вы ищете Угловой (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, но для всего, что Вы действительно смотрите вокруг для некоторого примера кода, поскольку существует почти всегда угловая альтернатива.

25
ответ дан 31 October 2019 в 13:00

Отправка данных к некоторой сервисной странице.

<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
ответ дан 31 October 2019 в 13:00

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

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

1
ответ дан 31 October 2019 в 13:00

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>

Codepen

0
ответ дан 31 October 2019 в 13:00

Другие вопросы по тегам:

Похожие вопросы: