AngularJS tidak mengirim nilai bidang tersembunyi

Untuk kasus penggunaan tertentu, saya harus menyerahkan satu formulir dengan "cara lama". Berarti, saya menggunakan formulir dengan action = "". Responsnya dialirkan, jadi saya tidak memuat ulang laman. Saya sepenuhnya menyadari bahwa aplikasi AngularJS biasa tidak akan mengirimkan formulir seperti itu, tetapi sejauh ini saya tidak punya pilihan lain.

Yang mengatakan, saya mencoba mengisi beberapa bidang tersembunyi dari Angular:

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

Harap dicatat, nilai yang benar dalam data ditampilkan.

Bentuknya terlihat seperti bentuk standar:

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

Jika saya tekan kirim, tidak ada nilai yang dikirim ke server. Jika saya mengubah bidang input untuk mengetik "teks" itu berfungsi seperti yang diharapkan. Asumsi saya adalah bidang tersembunyi tidak benar-benar diisi, sedangkan bidang teks sebenarnya ditampilkan karena mengikat dua arah.

Adakah gagasan bagaimana saya bisa mengirimkan bidang tersembunyi yang dihuni oleh AngularJS?

Anda tidak dapat menggunakan ikatan ganda dengan bidang tersembunyi. Solusinya adalah dengan menggunakan tanda kurung:

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

EDIT: Lihat utas ini di github: https://github.com/angular/angular.js/pull/2574

EDIT:

Sejak Angular 1.2, Anda dapat menggunakan arahan 'ng-value' untuk mengikat ekspresi ke atribut nilai input. Arahan ini harus digunakan dengan radio input atau kotak centang tetapi bekerja dengan baik dengan input tersembunyi.

Inilah solusinya menggunakan nilai-ng:

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

Berikut adalah biola yang menggunakan nilai-ng dengan input tersembunyi: http://jsfiddle.net/6SD9N

Anda selalu dapat menggunakan a type=textdan display:none;karena Angular mengabaikan elemen tersembunyi. Seperti kata OP, biasanya Anda tidak akan melakukan ini, tetapi ini sepertinya kasus khusus.

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

Di controller:

$scope.entityId = $routeParams.entityId;

Dalam tampilan:

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

Saya telah menemukan solusi bagus yang ditulis oleh Mike pada sapiensworks . Ini sesederhana menggunakan arahan yang mengawasi perubahan pada model Anda:

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

dan kemudian ikat input Anda:

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

Tetapi solusi yang disediakan oleh tymeJV bisa lebih baik sebagai input tersembunyi tidak memecat acara perubahan dalam javascript seperti yang dikatakan yycorman pada posting ini , jadi ketika mengubah nilai melalui plugin jQuery masih akan berfungsi.

Sunting Saya telah mengubah arahan untuk menerapkan nilai baru kembali ke model ketika perubahan acara dipicu, sehingga akan berfungsi sebagai teks input.

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

jadi ketika Anda memicu $("#yourInputHidden").trigger('change')acara dengan jQuery, itu akan memperbarui model yang diikat juga.

Menemukan perilaku aneh tentang nilai tersembunyi ini () dan kami tidak dapat membuatnya berfungsi.

Setelah bermain-main kami menemukan cara terbaik hanya mendefinisikan nilai dalam controller itu sendiri setelah lingkup bentuk.

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

}])

Saya mencapai ini melalui -

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

perbarui jawaban @tymeJV misalnya:

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

Saya telah menghadapi masalah yang sama, saya benar-benar perlu mengirim kunci dari jsp saya ke skrip java, menghabiskan sekitar 4 jam atau lebih dari hari saya untuk menyelesaikannya.

Saya menyertakan tag ini pada JavaScript / JSP saya:

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

Hasilnya adalah: Portfólio 1 criado com sucesso! ID = 3.

Salam Hormat

Kalau-kalau ada orang yang masih berjuang dengan ini, saya punya masalah yang sama ketika mencoba untuk melacak sesi pengguna / userid pada formulir multi halaman

Saya sudah memperbaikinya dengan menambahkan

.when ("/ q2 /: uid" dalam perutean:

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

Dan menambahkan ini sebagai bidang tersembunyi untuk melewati params antara halaman webform

<< tipe input = "tersembunyi" wajib ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Saya baru untuk Angular jadi tidak yakin itu solusi terbaik tetapi tampaknya berfungsi baik untuk saya sekarang

Langsung memberikan nilai ke model dalam data-ng-valueatribut. Karena penerjemah Angular tidak mengenali bidang tersembunyi sebagai bagian dari ngModel.

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

Saya menggunakan javascript klasik untuk mengatur nilai ke input tersembunyi

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

Kode di bawah ini akan berfungsi untuk IFF ini dengan urutan yang sama seperti yang disebutkan, pastikan Anda memesan, ketik nama, ng-model ng-init, nilai. itu dia.

Di sini saya ingin membagikan kode kerja saya:

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