AngularJS не отправляет скрытое значение поля

Для конкретного случая использования я должен представить одну форму «по-старому». Значит, я использую форму с action = "". Ответ передается в потоковом режиме, поэтому я не перезагружаю страницу. Я полностью осознаю, что типичное приложение AngularJS не будет отправлять форму таким образом, но пока у меня нет другого выбора.

Тем не менее, я попытался заполнить некоторые скрытые поля из Angular:

<input type="hidden" name="someData" ng-model="data" /> {{data}}

Обратите внимание, правильное значение в данных отображается.

Форма выглядит как стандартная форма:

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

Если я нажму "отправить", никакое значение не будет отправлено на сервер. Если я изменю поле ввода на тип «текст», оно будет работать как положено. Я предполагаю, что скрытое поле на самом деле не заполнено, в то время как текстовое поле фактически отображается из-за двусторонней привязки.

Любые идеи, как я могу представить скрытое поле, заполненное AngularJS?

Вы не можете использовать двойную привязку со скрытым полем. Решение заключается в использовании скобок:

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

РЕДАКТИРОВАТЬ: см. Эту тему на GitHub: https://github.com/angular/angular.js/pull/2574

РЕДАКТИРОВАТЬ:

Начиная с версии Angular 1.2, вы можете использовать директиву ng-value, чтобы связать выражение с атрибутом value ввода. Эта директива должна использоваться с входным радио или флажком, но хорошо работает со скрытым вводом.

Вот решение, использующее значение ng:

<input type="hidden" name="someData" ng-value="data" />

Вот скрипка, использующая ng-значение со скрытым вводом: http://jsfiddle.net/6SD9N

Вы всегда можете использовать a type=textи display:none;Angular игнорирует скрытые элементы. Как говорит OP, обычно вы бы этого не делали, но это похоже на особый случай.

<input type="text" name="someData" ng-model="data" style="display: none;"/>

В контроллере:

$scope.entityId = $routeParams.entityId;

По мнению:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />

Я нашел хорошее решение, написанное Майком на sapiensworks . Это так же просто, как использовать директиву, которая отслеживает изменения в вашей модели:

.directive('ngUpdateHidden',function() {
    return function(scope, el, attr) {
        var model = attr['ngModel'];
        scope.$watch(model, function(nv) {
            el.val(nv);
        });
    };
})

а затем свяжите ваш ввод:

<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

Но решение, предоставленное tymeJV, могло бы быть лучше, так как скрытый ввод не вызывает событие change в javascript, как рассказал yycorman в этом посте, поэтому при изменении значения через плагин jQuery все равно будет работать.

Изменить Я изменил директиву, чтобы применить новое значение обратно к модели, когда инициируется событие изменения, поэтому оно будет работать как текст ввода.

.directive('ngUpdateHidden', function () {
    return {
        restrict: 'AE', //attribute or element
        scope: {},
        replace: true,
        require: 'ngModel',
        link: function ($scope, elem, attr, ngModel) {
            $scope.$watch(ngModel, function (nv) {
                elem.val(nv);
            });
            elem.change(function () { //bind the change event to hidden input
                $scope.$apply(function () {
                    ngModel.$setViewValue(  elem.val());
                });
            });
        }
    };
})

поэтому, когда вы запускаете $("#yourInputHidden").trigger('change')событие с помощью jQuery, оно также обновляет связанную модель.

Обнаружил странное поведение в отношении этого скрытого значения (), и мы не можем заставить его работать.

После игры мы обнаружили, что лучший способ - это просто определить значение в самом контроллере после области видимости.

.controller('AddController', [$scope, $http, $state, $stateParams, function($scope, $http, $state, $stateParams) {

    $scope.routineForm = {};
    $scope.routineForm.hiddenfield1 = "whatever_value_you_pass_on";

    $scope.sendData = function {

// JSON http post action to API 
}

}])

Я достиг этого через -

 <p style="display:none">{{user.role="store_user"}}</p>

обновить ответ @tymeJV, например:

 <div style="display: none">
    <input type="text" name='price' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
 </div>

Я столкнулся с той же проблемой, мне действительно нужно отправить ключ из моего jsp в java-скрипт. На его решение уходит около 4 часов или больше моего дня.

Я включил этот тег в мой JavaScript / JSP:

 $scope.sucessMessage = function (){  
    	var message =     ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id);
    	$scope.inforMessage = message;
    	alert(message);  
}
 

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

<!-- Messages definition -->
<input type="hidden"  name="sucess"   ng-init="messages.sucess='<fmt:message  key='portfolio.create.sucessMessage' />'" >

<!-- Message showed affter insert -->
<div class="alert alert-info" ng-show="(inforMessage.length > 0)">
    {{inforMessage}}
</div>

<!-- properties
  portfolio.create.sucessMessage=Portf\u00f3lio {0} criado com sucesso! ID={1}. -->

Результат был: Portfólio 1 criado com sucesso! ID = 3.

Наилучшие пожелания

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

Я исправил это, добавив

.when ("/ q2 /: uid" в маршрутизации:

    .when("/q2/:uid", {
        templateUrl: "partials/q2.html",
        controller: 'formController',
        paramExample: uid
    })

И добавил это как скрытое поле для передачи параметров между страницами веб-формы

<< input type = "hidden" обязательный ng-model = "formData.userid" ng-init = "formData.userid = uid" />

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

Непосредственно назначьте значение модели в data-ng-valueатрибуте. Так как интерпретатор Angular не распознает скрытые поля как часть ngModel.

<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>

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

$scope.SetPersonValue = function (PersonValue)
{
    document.getElementById('TypeOfPerson').value = PersonValue;
    if (PersonValue != 'person')
    {
        document.getElementById('Discount').checked = false;
        $scope.isCollapsed = true;
    }
    else
    {
        $scope.isCollapsed = false;
    }
}

Ниже код будет работать для этого IFF в том же порядке, что и упомянутый выше. Убедитесь, что вы указали тип, а затем имя, ng-модель, ng-init, значение. Это оно.

Здесь я хотел бы поделиться своим рабочим кодом:

<input type="text" name="someData" ng-model="data" ng-init="data=2" style="display: none;"/>
OR
<input type="hidden" name="someData" ng-model="data" ng-init="data=2"/>
OR
<input type="hidden" name="someData" ng-init="data=2"/>