AngularJS छिपा फ़ील्ड मान नहीं भेजता है

Question

एक विशिष्ट उपयोग के मामले में मुझे "पुराने तरीके" से एक ही फॉर्म जमा करना होगा। मीन्स, मैं एक्शन के साथ एक फॉर्म का उपयोग करता हूं = ""। प्रतिक्रिया को स्ट्रीम किया जाता है, इसलिए मैं पृष्ठ को पुनः लोड नहीं कर रहा हूं। मैं पूरी तरह से जानता हूं कि एक विशिष्ट AngularJS ऐप इस तरह से एक फॉर्म सबमिट नहीं करेगा, लेकिन अभी तक मेरे पास कोई अन्य विकल्प नहीं है।

उस ने कहा, मैंने कोणीय से कुछ छिपे हुए क्षेत्रों को आबाद करने की कोशिश की:

<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 द्वारा आबादी वाले एक छिपे हुए क्षेत्र को कैसे प्रस्तुत कर सकता हूं?

Comments

हम्म ... टाइप टेक्स्ट के बारे में कैसे display: none;? यह बदसूरत थो है। कोणीय छिपे हुए तत्वों की उपेक्षा करता है।

— tymeJV

जवाब @tymeJV के रूप में रखें!

— जेरोइन इंगलब्रेक्ट

मैं एक मूल्य बाध्य करने के लिए निम्न सिंटैक्स का उपयोग: <input type="hidden" required ng-model="data.userid" ng-init="data.userid=pivot.id" /> । यह करने का उचित तरीका नहीं हो सकता है लेकिन यह मेरे लिए काम करता है।

— जॉन पी

Answer 1

आप छिपे हुए फ़ील्ड के साथ डबल बाइंडिंग का उपयोग नहीं कर सकते। समाधान कोष्ठक का उपयोग करना है:

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

EDIT: इस धागे को गितुब पर देखें: https://github.com/angular/angular.js/pull/2574

संपादित करें:

कोणीय 1.2 के बाद से, आप किसी एक्सप्रेशन को इनपुट की वैल्यू एट्रिब्यूट से बांधने के लिए 'एनजी-वैल्यू' निर्देश का उपयोग कर सकते हैं। इस निर्देश का उपयोग इनपुट रेडियो या चेकबॉक्स के साथ किया जाना चाहिए, लेकिन छिपे हुए इनपुट के साथ अच्छी तरह से काम करता है।

यहाँ एनजी-मान का उपयोग कर समाधान है:

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

यहाँ एक छिपे हुए इनपुट के साथ एनजी-मान का उपयोग करके एक फिडेल है: http://jsfiddle.net/6SD9N

Comments

बहुत बढ़िया। बहुत बहुत धन्यवाद। मैं लगभग टेक्स्टफील्ड को छिपाने के साथ जा रहा था, लेकिन अब मुझे लगता है कि यह बहुत अच्छा है।

— क्रिश्चियन

महान। और यह भी आप कोष्ठक के बिना करने के लिए एनजी-मूल्य = "मॉडलनाम" का उपयोग कर सकते हैं।

— जोनाथन

यह सही है, क्योंकि कोणीय 1.2 के बाद से, आप किसी एक्सप्रेशन को मान विशेषता पर बाँधने के लिए एनजी-मान का उपयोग कर सकते हैं, इसका उत्तर आज तक है।

— मिकेल

जब आप AngularJS का उपयोग करते हैं तो क्या आपको वास्तव में एक छिपे हुए क्षेत्र की आवश्यकता है? ngSubmit पर आप एक कंट्रोलर से टकराते हैं, आपका सारा डेटा एक्सेस के लिए पूरी तरह से दिखाई देता है, और आप इसे कुछ $ http सर्विस के जरिए भेजते हैं।

— mtpultz

बहुत बहुत धन्यवाद। तथ्य यह है कि एनजी-मॉडल का उपयोग छिपे हुए इनपुट के लिए नहीं किया जा सकता है, को एंगुलरजेएस आईएमओ में प्रलेखित किया जाना चाहिए।

— युनेशे

Answer 2

आप हमेशा एक का उपयोग कर सकते हैं type=textऔर display:none;चूंकि कोणीय छिपे हुए तत्वों की उपेक्षा करता है। जैसा कि ओपी कहते हैं, आम तौर पर आप ऐसा नहीं करेंगे, लेकिन यह एक विशेष मामले की तरह लगता है।

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

Comments

धन्यवाद! मैंने उसी दिशा में सोचा था, लेकिन मुझे मिकेल से {{}} समाधान पसंद करना था।

— क्रिश्चियन

चतुर / स्मार्ट समाधान

— इमरानकवी

Answer 3

नियंत्रक में:

$scope.entityId = $routeParams.entityId;

दृश्य में:

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

Comments

अच्छी बात है ... मैं इसे केवल अगली बार कंट्रोलर में करना

— चाहूंगा

मुझे

— एनजीटी के

नू। पाश में यह बहुत मुसीबत बना देता है और सभी के लिए अंतिम मान प्रदान करती है entityId, तो entityIdएक सरणी है

— ImranNaqvi

Answer 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 द्वारा प्रदान किया गया समाधान बेहतर हो सकता है क्योंकि छिपाया गया इनपुट जावास्क्रिप्ट में परिवर्तन की घटना को आग नहीं देता है क्योंकि इस पोस्ट पर 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 के साथ ईवेंट को ट्रिगर करते हैं , तो यह बाइंड किए गए मॉडल को भी अपडेट करेगा।

Comments

किसी और को काम करने के लिए इस समाधान होने में परेशानी हो रही है? मुद्दा यह है कि जब निर्देश पार्स और निष्पादित किया जाता है, तो ngModel पैरामीटर अपरिभाषित होता है, इस प्रकार, $ घड़ी नहीं जोड़ी जाती है।

— icfantv

ठीक। ऐसा प्रतीत होता है कि यह मुद्दा है कि चौथा पैरामीटर एनकोडेल एक वस्तु है, जबकि sapiensworks पर लिंक से संदर्भित उदाहरण attr ['ngModel'] के माध्यम से एनजी-मॉडल विशेषता का स्ट्रिंग मान प्राप्त करता है और फिर उस घड़ी को पास करता है। मैं इस बात की पुष्टि कर सकता हूं कि यह परिवर्तन घड़ी की समस्या को ठीक करता है।

— icfantv

यहाँ एक और मुद्दा है। जब आप प्रोग्रामिक रूप से किसी छिपे हुए इनपुट फ़ील्ड के मान को बदलते हैं, तो jQuery एक परिवर्तन ईवेंट को फायर नहीं करता है। इसलिए अगर मैं $ (hidden_input_elt) .val ("स्नूपी") कहता हूं, तो मुझे परिवर्तन घटना को निकाल देने के लिए .change () भी जोड़ना होगा। इसके साथ समस्या यह है कि एंगुलर उपरोक्त $ गुंजाइश के बारे में शिकायत करेगा ।apply () क्योंकि यह पहले से ही एक $ लागू में पहले से ही प्रगति पर है। यहाँ समाधान $ गुंजाइश को हटाने के लिए है। $ ऊपर के परिवर्तन कार्य में लागू होते हैं और सिर्फ ngModel कहते हैं। $ setViewValue (...)।

— icfantv

Answer 5

इस छिपे हुए मूल्य () के बारे में एक अजीब व्यवहार मिला और हम इसे काम नहीं कर सकते।

चारों ओर खेलने के बाद हमने सबसे अच्छा तरीका पाया कि फार्म के दायरे के बाद ही नियंत्रक में मूल्य को परिभाषित किया जाए।

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

मैंने इसे हासिल किया -

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

Answer 7

अपडेट @tymeJV का उत्तर उदा:

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

Answer 8

मुझे उसी समस्या का सामना करना पड़ रहा था, मुझे वास्तव में अपनी jsp से जावा स्क्रिप्ट में एक कुंजी भेजने की आवश्यकता है, इसे हल करने के लिए मेरे दिन का लगभग 4h या अधिक खर्च होता है।

मैं इस टैग को अपने जावास्क्रिप्ट / 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! आईडी = 3।

सादर

Answer 9

बस अगर कोई अभी भी इससे जूझता है, तो मुझे इसी तरह की समस्या थी जब यूजर सेशन / यूजरिड को मल्टीपज फॉर्म पर रखने की कोशिश की जा रही थी

Ive को जोड़कर तय किया

.when ("/ q2 /: uid" रूटिंग में:

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

और इसे वेबपेजों के बीच पैरामेट्स पास करने के लिए एक छिपे हुए क्षेत्र के रूप में जोड़ा

<< इनपुट प्रकार = "छिपा हुआ" आवश्यक एनजी-मॉडल = "फॉर्मडैट.सुअरिड" एनजी-इनिट = "फॉर्मडाटा.सुअरिड = यूआईडी" />

कोणीय के लिए नया हूँ इसलिए इसका सबसे अच्छा संभव समाधान सुनिश्चित नहीं है, लेकिन यह मेरे लिए अब ठीक काम करने लगता है

Answer 10

data-ng-valueविशेषता में मॉडल के लिए सीधे मान असाइन करें । चूंकि कोणीय दुभाषिया एनग्मोडल के हिस्से के रूप में छिपे हुए क्षेत्रों को नहीं पहचानता है।

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

Answer 11

मैं छिपे हुए इनपुट के लिए मूल्य निर्धारित करने के लिए एक शास्त्रीय जावास्क्रिप्ट का उपयोग करता हूं

$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

नीचे दिए गए कोड इस IFF के लिए उसी क्रम में काम करेंगे, जैसा कि इसका उल्लेख किया गया है सुनिश्चित करें कि आप ऑर्डर का नाम, एनजी-मॉडल एनजी-इनिट, मान है। बस।

Answer 13

यहां मैं अपना कार्य कोड साझा करना चाहता हूं:

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

Comments

क्या आप कृपया अधिक स्पष्टीकरण दे सकते हैं

— JSmith

ज़रूर! जब हम छिपे हुए फ़ील्ड या प्रदर्शन के साथ एक टेक्स्ट फ़ील्ड का उपयोग करते हैं: कोई भी विशेषता नहीं, उपयोगकर्ता इनपुट मूल्य में सक्षम नहीं है। उस मामले में एनजी-इनिट निर्देश क्षेत्र के लिए मूल्य निर्धारित करने में मदद करता है। धन्यवाद

— जे Middya

पोस्ट में मेरा मतलब क्षमा करें

— JSmith