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

Question

Đối với trường hợp sử dụng cụ thể, tôi phải gửi một biểu mẫu duy nhất theo "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 trực tiếp, vì vậy tôi không tải lại trang. Tôi hoàn toàn nhận thức được 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òn lựa chọn nào khác.

Điều đó nói rằng, tôi đã cố gắng để cư một số lĩnh vực tiềm ẩn từ góc:

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

Xin lưu ý, giá trị đúng trong dữ liệu được hiển thị.

Hình thức 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ị sẽ được gửi đến máy chủ. Nếu tôi thay đổi trường nhập để nhập "văn bản", nó hoạt động như mong đợi. Giả định của tôi là trường ẩn không thực sự phổ biến, trong khi trường văn bản thực sự được hiển thị do hai chiều ràng buộc.

Bất kỳ ý tưởng nào về cách tôi có thể gửi trường ẩn do AngularJS điền?

Answer 1

Bạn không thể sử dụng liên kết kép với trường ẩn. Các 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

EDIT:

Từ góc 1.2, bạn có thể sử dụng 'ng-giá trị' chỉ để ràng buộc một biểu thức thuộc tính giá trị của đầu vào. Chỉ thị này nên được sử dụng với radio hoặc hộp kiểm đầu vào nhưng hoạt động tốt với đầu vào bị ẩn.

Đây là giải pháp sử dụng ng có giá trị:

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

Dưới đây là một fiddle sử dụng ng-giá trị với một đầu vào ẩn: http://jsfiddle.net/6SD9N

Answer 2

Bạn luôn có thể sử dụng type=text và 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 điều này có vẻ như một trường hợp đặc biệt.

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

Answer 3

Tôi đã tìm thấy một giải pháp tốt đẹp được viết bởi Mike trên sapiensworks . Nó cũng đơn giản như sử dụng một chỉ thị rằng đồng hồ cho những thay đổi về 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 đó liên kết đầ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 như đầu vào ẩn doesn' t cháy sự kiện thay đổi trong javascript như yycorman nói trên this bài, vì vậy khi thay đổi giá trị thông qua một plugin jQuery sẽ vẫn làm việc.

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, vì vậy 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 ràng buộc.

Answer 4

Trong bộ điều khiển:

$scope.entityId = $routeParams.entityId; 

Trong giao diện:

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

Answer 5

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 chìa khóa từ jsp của tôi để kịch bản java, Nó dành khoảng 4h hoặc nhiều hơn trong ngày để giải quyết nó.

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

$scope.sucessMessage = function(){ 
 
    \t var message =  ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id); 
 
    \t $scope.inforMessage = message; 
 
    \t 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à: danh mục đầu tư 1 criado com Sucesso! ID = 3.

Trân trọng

Answer 6

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

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

Answer 7

Tìm thấy một hành vi kỳ lạ về giá trị này ẩn() 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 nhận thấy cách tốt nhất chỉ được xác định giá trị trong bộ điều khiển chính 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 
} 

}]) 

Answer 8

Chỉ trong trường hợp ai đó vẫn còn phải đấu tranh với điều này, tôi đã có vấn đề tương tự khi cố gắng theo dõi những người sử dụng phiên/userid vào mẫu nhiều trang

Ive cố định bằng cách thêm

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

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

Và thêm đây là một lĩnh vực tiềm ẩn để vượt qua params giữa các trang Webform

0.123.

< < input type = "hidden" đòi hỏi ng-mô hình = "formData.userid" ng-init = "formData.userid = uid" />

Im mới để kiễu góc nên không chắc chắn là giải pháp tốt nhất có thể của nó nhưng nó dường như làm việc ok cho tôi bây giờ

Answer 9

cập nhật @tymeJV 's câu trả lời ví dụ:

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

Answer 10

trực tiếp gán giá trị để mô hình hóa trong data-ng-value thuộc tính. Vì trình thông dịch Góc không nhận ra các trường ẩn như một phần của ngModel.

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

Answer 11

tôi sử dụng một javascript cổ điển để thiết lập giá trị cho đầ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; 
    } 
} 

Answer 12

Dưới Mã sẽ làm việc cho IFF này nó theo thứ tự giống như mentionened nó chắc chắn rằng bạn đặt hàng là loại sau đó đặt tên, ng-model ng-init, giá trị. đó là nó.