AngularJS không gửi giá trị trường ẩn

Đối với một trường hợp sử dụng cụ thể, tôi phải gửi một mẫu đơn "cách cũ". Có nghĩa là, tôi sử dụng một hình thức với hành động = "". Phản hồi được truyền phát, vì vậy tôi không tải lại trang. Tôi hoàn toàn biết rằng một ứng dụng AngularJS điển hình sẽ không gửi biểu mẫu theo cách đó, nhưng cho đến nay tôi không có lựa chọn nào khác.

Điều đó nói rằng, tôi đã cố gắng điền vào một số trường ẩn từ Angular:

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

Xin lưu ý, giá trị chính xác trong dữ liệu được hiển thị.

Biểu mẫu trông giống như một hình thức tiêu chuẩn:

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

Nếu tôi nhấn gửi, không có giá trị nào được gửi đến máy chủ. Nếu tôi thay đổi trường đầu vào để gõ "văn bản" thì nó hoạt động như mong đợi. Giả định của tôi là trường ẩn không thực sự được điền, trong khi trường văn bản thực sự được hiển thị do ràng buộc hai chiều.

Bất kỳ ý tưởng nào làm thế nào tôi có thể gửi một trường ẩn được điền bởi AngularJS?

Bạn không thể sử dụng liên kết đôi với trường ẩn. Giải pháp là sử dụng dấu ngoặc:

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

EDIT: Xem chủ đề này trên github: https://github.com/angular/angular.js/pull/2574

BIÊN TẬP:

Kể từ Angular 1.2, bạn có thể sử dụng chỉ thị 'ng-value' để liên kết một biểu thức với thuộc tính value của đầu vào. Lệnh này nên được sử dụng với radio đầu vào hoặc hộp kiểm nhưng hoạt động tốt với đầu vào ẩn.

Đây là giải pháp sử dụng ng-value:

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

Đây là một fiddle sử dụng ng-value với một đầu vào ẩn: http://jsfiddle.net/6SD9N

Bạn luôn có thể sử dụng một type=textvà display:none;vì Angular bỏ qua các yếu tố ẩn. Như OP nói, thông thường bạn sẽ không làm điều này, nhưng đây có vẻ là một trường hợp đặc biệt.

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

Trong bộ điều khiển:

$scope.entityId = $routeParams.entityId;

Theo quan điểm:

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

Tôi đã tìm thấy một giải pháp hay được viết bởi Mike trên sapiensworks . Nó đơn giản như việc sử dụng một lệnh theo dõi các thay đổi trên mô hình của bạn:

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

và sau đó ràng buộc đầu vào của bạn:

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

Nhưng giải pháp được cung cấp bởi tymeJV có thể tốt hơn vì đầu vào ẩn không xảy ra sự kiện thay đổi lửa trong javascript như yycorman đã nói trên bài đăng này , vì vậy khi thay đổi giá trị thông qua plugin jQuery vẫn sẽ hoạt động.

Chỉnh sửa Tôi đã thay đổi chỉ thị để áp dụng giá trị mới cho mô hình khi sự kiện thay đổi được kích hoạt, do đó, nó sẽ hoạt động như một văn bản đầu vào.

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

Vì vậy, khi bạn kích hoạt $("#yourInputHidden").trigger('change')sự kiện với jQuery, nó cũng sẽ cập nhật mô hình được liên kết.

Tìm thấy một hành vi kỳ lạ về giá trị ẩn này () và chúng tôi không thể làm cho nó hoạt động.

Sau khi chơi xung quanh, chúng tôi thấy cách tốt nhất là xác định giá trị trong chính bộ điều khiển sau phạm vi biểu mẫu.

.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 
}

}])

Tôi đã đạt được điều này thông qua -

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

cập nhật câu trả lời của @tymeJV, vd:

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

Tôi đã phải đối mặt với cùng một vấn đề, tôi thực sự cần phải gửi một khóa từ jsp của tôi đến tập lệnh java, Nó mất khoảng 4h hoặc hơn trong ngày của tôi để giải quyết nó.

Tôi bao gồm thẻ này trên JavaScript / JSP của mình:

 $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}. -->

Kết quả là: Portfólio 1 criado com sucesso! ID = 3.

Trân trọng

Chỉ trong trường hợp ai đó vẫn vật lộn với điều này, tôi đã gặp vấn đề tương tự khi cố gắng theo dõi phiên người dùng / userid ở dạng nhiều trang

Ive đã sửa nó bằng cách thêm

.when ("/ q2 /: uid" trong định tuyến:

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

Và thêm nó dưới dạng một trường ẩn để chuyển thông số giữa các trang webform

<< input type = "hidden" bắt buộc ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Tôi mới sử dụng Angular nên không chắc là giải pháp tốt nhất có thể nhưng hiện tại nó hoạt động tốt với tôi

Trực tiếp gán giá trị cho mô hình trong data-ng-valuethuộc tính. Vì trình thông dịch Angular không nhận ra các trường ẩn là một phần của ngModel.

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

Tôi sử dụng một javascript cổ điển để đặt giá trị thành đầu vào ẩn

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

Dưới đây Mã sẽ hoạt động cho IFF này theo thứ tự như đã đề cập, đảm bảo rằng bạn đặt hàng là loại rồi tên, ng-model ng-init, value. đó là nó.

Ở đây tôi muốn chia sẻ mã làm việc của tôi:

<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"/>