AngularJS не отправляет скрытое значение поля
147646 просмотра
13 ответа
Для конкретного случая использования я должен представить одну форму «по-старому». Значит, я использую форму с 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?
Автор: Christian Источник Размещён: 12.11.2019 09:09Ответы (13)
287 плюса
Вы не можете использовать двойную привязку со скрытым полем. Решение заключается в использовании скобок:
<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
Автор: Mickael Размещён: 26.08.2013 02:3846 плюса
Вы всегда можете использовать a type=text
и display:none;
Angular игнорирует скрытые элементы. Как говорит OP, обычно вы бы этого не делали, но это похоже на особый случай.
<input type="text" name="someData" ng-model="data" style="display: none;"/>
Автор: tymeJV
Размещён: 26.08.2013 02:24
8 плюса
В контроллере:
$scope.entityId = $routeParams.entityId;
По мнению:
<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />
Автор: meffect
Размещён: 02.07.2014 10:54
4 плюса
Я нашел хорошее решение, написанное Майком на 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, оно также обновляет связанную модель.
2 плюса
Обнаружил странное поведение в отношении этого скрытого значения (), и мы не можем заставить его работать.
После игры мы обнаружили, что лучший способ - это просто определить значение в самом контроллере после области видимости.
.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
}
}])
Автор: dcpartners
Размещён: 05.12.2015 07:32
1 плюс
Я достиг этого через -
<p style="display:none">{{user.role="store_user"}}</p>
Автор: Vivek
Размещён: 23.11.2015 01:03
1 плюс
обновить ответ @tymeJV, например:
<div style="display: none">
<input type="text" name='price' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
</div>
Автор: Albert.Qing
Размещён: 15.04.2016 02:37
0 плюса
Я столкнулся с той же проблемой, мне действительно нужно отправить ключ из моего 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.
С уважением
Автор: LeoJava Размещён: 02.04.2015 02:460 плюса
На тот случай, если кто-то все еще борется с этим, у меня возникла похожая проблема при попытке отслеживать сеанс пользователя / идентификатор пользователя в многостраничной форме.
Я исправил это, добавив
.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, поэтому не уверен, что это лучшее из возможных решений, но сейчас мне кажется, что оно работает нормально.
Автор: macieku Размещён: 28.02.2016 04:160 плюса
Непосредственно назначьте значение модели в data-ng-value
атрибуте. Так как интерпретатор Angular не распознает скрытые поля как часть ngModel.
<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>
Автор: Nikhil.Hmath
Размещён: 03.12.2016 03:56
0 плюса
Я использую классический 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;
}
}
Автор: Ivan Kuznietsov
Размещён: 22.12.2016 11:00
0 плюса
Ниже код будет работать для этого IFF в том же порядке, что и упомянутый выше. Убедитесь, что вы указали тип, а затем имя, ng-модель, ng-init, значение. это оно.
Автор: Pawan Parashar Размещён: 23.03.2017 05:340 плюса
Здесь я хотел бы поделиться своим рабочим кодом:
<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"/>
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- forms Как установить фокус на первый элемент ввода в форме HTML независимо от идентификатора?
- forms Как построить строку запроса с Javascript
- forms В форме Django как сделать поле доступным только для чтения (или отключенным), чтобы его нельзя было редактировать?
- forms Как получить ответ формы.
- forms Когда я должен использовать метод GET или POST? Какая разница между ними?
- forms Поле выбора в одну строку со стрелками вверх / вниз, как в окне выбора в несколько строк
- angularjs AngularJS с Django - конфликтующие шаблоны тегов
- angularjs Can one AngularJS controller call another?
- angularjs Вставьте HTML в представление
- angularjs Как работает привязка данных в AngularJS?
- angularjs Могу ли я использовать другой префикс вместо `ng` с angularjs?
- angularjs Не удается добраться до $ rootScope