AngularJS লুকানো মাঠের মান প্রেরণ করে না

Question

নির্দিষ্ট ব্যবহারের ক্ষেত্রে আমাকে একটি ফর্ম "পুরানো উপায়" জমা দিতে হবে। মানে, আমি ক্রিয়া = "" সহ একটি ফর্ম ব্যবহার করি। প্রতিক্রিয়াটি স্ট্রিম করা হয়েছে, তাই আমি পৃষ্ঠাটি পুনরায় লোড করছি না। আমি পুরোপুরি সচেতন যে একটি সাধারণ অ্যাঙ্গুলারজেএস অ্যাপটি সেভাবে কোনও ফর্ম জমা দেবে না, তবে এখনও পর্যন্ত আমার অন্য কোনও পছন্দ নেই।

এটি বলেছিল, আমি কৌণিক থেকে কিছু লুকানো ক্ষেত্র পপুলেশন করার চেষ্টা করেছি:

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

যদি আমি হিট সাবমিট, সার্ভারে কোন মান প্রেরণ করা হয়। আমি যদি ইনপুট ক্ষেত্রটি "পাঠ্য" টাইপ করতে পরিবর্তন করি তবে এটি প্রত্যাশার মতো কাজ করে। আমার ধারণা হ'ল লুকানো ক্ষেত্রটি সত্যই জনবহুল নয়, যখন পাঠ্য ক্ষেত্রটি আসলে দ্বিমুখী বাইন্ডিং প্রদর্শিত হয়।

অ্যাঙ্গুলারজেএস দ্বারা জনবহুল কোনও লুকানো ক্ষেত্র কীভাবে জমা দিতে পারি তার কোনও ধারণাগুলি?

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

সম্পাদনা: এই থ্রেডটি গিথুব এ দেখুন: https://github.com/angular/angular.js/pull/2574

সম্পাদনা করুন:

আঙ্গুলের ১.২ থেকে আপনি ইনপুটটির মান বৈশিষ্ট্যের সাথে একটি এক্সপ্রেশন বাঁধতে 'এনজি-মান' নির্দেশিকা ব্যবহার করতে পারেন। এই নির্দেশটি ইনপুট রেডিও বা চেকবক্সের সাথে ব্যবহার করা উচিত তবে লুকানো ইনপুট দিয়ে ভাল কাজ করে।

এনজিও-মান ব্যবহার করে সমাধানটি এখানে দেওয়া হয়েছে:

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

এখানে একটি লুকানো ইনপুট সহ এনজি-মান ব্যবহার করে একটি ফিডল রয়েছে: http://jsfiddle.net/6SD9N

Comments

অসাধারণ. অনেক ধন্যবাদ. আমি প্রায় পাঠ্যক্ষেত্রটি গোপন করে যাচ্ছিলাম তবে এখন আমি মনে করি এটি দুর্দান্ত কাজ great

— খ্রিস্টান ২

গ্রেট। এবং বন্ধনী ছাড়াই এটি করতে আপনি এনজিও-মান = "মডেলনাম" ব্যবহার করতে পারেন।

— জোনাথন

এটি ঠিক, আঙ্গুলের ১.২ থেকে আপনি এনগ্রি-ভ্যালুটি মান বৈশিষ্ট্যের সাথে একটি অভিব্যক্তি বাঁধতে ব্যবহার করতে পারেন, উত্তরটি আপ টু ডেট।

— মিকেল

আপনি যখন AngularJS ব্যবহার করেন তখন আপনার কি সত্যিই কোনও গোপন ক্ষেত্রের প্রয়োজন হয়? এনজিউ সাবমিট করে আপনি একটি নিয়ামককে আঘাত করেন আপনার সমস্ত ডেটা অ্যাক্সেসের জন্য সম্পূর্ণ দৃশ্যমান এবং আপনি এটি কিছু it HTTP পরিষেবার মাধ্যমে প্রেরণ করেন।

— এমটিপল্টজ

অনেক ধন্যবাদ. লুকানো ইনপুট জন্য এনজি-মডেল ব্যবহার করা যাবে না এই বিষয়টি AngularJS IMO তে নথিভুক্ত করা উচিত।

— ইয়ুন্চি

Answer 2

আপনি সর্বদা একটি ব্যবহার করতে পারেন type=textএবং display:none;যেহেতু কৌণিক লুকানো উপাদানগুলিকে উপেক্ষা করে। ওপি যেমন বলেছে, সাধারণত আপনি এটি করবেন না তবে এটি একটি বিশেষ ক্ষেত্রে বলে মনে হচ্ছে।

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

Comments

ধন্যবাদ! আমি একই দিকে ভেবেছিলাম, তবে আমি কেবল মিকেল থেকে {{} olution সমাধানটি পছন্দ করতে পারি।

— খ্রিস্টান ২

চতুর / স্মার্ট সমাধান

— ইমরাননকভি

Answer 3

নিয়ামকটিতে:

$scope.entityId = $routeParams.entityId;

দেখুন মধ্যে:

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

Comments

ভাল কথা ... আমি কেবল পরের বারের

— নিয়ামকটিতে এটি করতে চাই

আমি এনজি-আর-এর প্রেমে

— পড়ছি

নুও। লুপে এটি অনেক ঝামেলা করে এবং অ্যারে entityIdহলে সবার জন্য শেষ মূল্য নির্ধারণ করেentityId

— ইমরাননাকভি

Answer 4

মাইকে লিখেছেন সেপিয়েন্স ওয়ার্কসে একটি দুর্দান্ত সমাধান পেয়েছি । এটি কোনও নির্দেশিকা ব্যবহার করার মতোই সহজ যা আপনার মডেলটিতে পরিবর্তনের জন্য নজর রাখে:

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

তবে টাইমজেভি দ্বারা প্রদত্ত সমাধানটি আরও ভাল হতে পারে কারণ ইনপুট লুকানো যেমন জাভাস্ক্রিপ্টে পরিবর্তিত ইভেন্টগুলিকে আগুন দেয় না যেমন ইয়াইকর্ম্যান এই পোস্টে বলেছে , তাই যখন কোনও জিক্যুরি প্লাগইনের মাধ্যমে মান পরিবর্তন করা তখনও কাজ করবে।

সম্পাদনা সম্পাদনা আমি যখন পরিবর্তন ইভেন্টটি ট্রিগার করা হয় তখন মডেলটিতে নতুন মানটি প্রয়োগের নির্দেশকে পরিবর্তন করেছি, সুতরাং এটি ইনপুট পাঠ্য হিসাবে কাজ করবে।

.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

কাজ করার এই সমাধান পেতে অন্য কারও কি সমস্যা হচ্ছে? সমস্যাটি হ'ল নির্দেশটি বিশ্লেষণ ও সম্পাদন করার সময় এনজিমোডেল প্যারামিটার অপরিজ্ঞাত হয়, সুতরাং, ঘড়িটি যুক্ত হয় না।

— icfantv

ঠিক আছে. এটি ইস্যুটি দেখা যায় যে চতুর্থ প্যারামিটার এনজিমোডেল একটি অবজেক্ট, যেখানে স্যাপিয়েন্স ওয়ার্কের লিঙ্ক থেকে রেফারেন্স করা উদাহরণটি এনজি-মডেল অ্যাট্রিবিউটের স্ট্রিং মান অ্যাট্রি ['এনজিএমডেল'] এর মাধ্যমে পুনরুদ্ধার করে এবং তারপরে সেইটিকে ঘড়ির মধ্যে ফেলে দেয়। আমি নিশ্চিত করতে পারি যে এই পরিবর্তনটি ঘড়ির সমস্যার সমাধান করে।

— icfantv

এখানে আরও একটি সমস্যা আছে। আপনি প্রোগ্রামযুক্তভাবে একটি লুকানো ইনপুট ক্ষেত্রের মান পরিবর্তন করলে jQuery কোনও পরিবর্তন ইভেন্টটিকে আগুন দেয় না। সুতরাং আমি যদি say (আড়াল_পিন্ড_ল্ট) বলি। ওভেল ("স্নুপি") পরিবর্তনের ইভেন্টটিকে বরখাস্ত করার জন্য আমাকে। পরিবর্তন () যুক্ত করতে হবে। এটির সাথে সমস্যাটি হচ্ছে অ্যাংুলার উপরের। স্কোপ.অ্যাপ্লাই () সম্পর্কে অভিযোগ করবে কারণ এটি ইতিমধ্যে একটি প্রয়োগে রয়েছে ইতিমধ্যে প্রক্রিয়াধীন রয়েছে। সমাধানটি হ'ল $ সুযোগটি সরানো remove উপরের পরিবর্তন ফাংশনে প্রয়োগ করুন এবং কেবল ngModel কল করুন $ সেটভিউভ্যালু (...)।

— 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

আমারও একই সমস্যার মুখোমুখি হয়েছিল, জাভা স্ক্রিপ্টে আমার সত্যিই আমার জেএসপি থেকে একটি কী পাঠানো দরকার, এটি সমাধান করতে আমার প্রায় 4 ঘন্টা বা তার বেশি সময় ব্যয় করে।

আমি আমার জাভাস্ক্রিপ্ট / জেএসপিতে এই ট্যাগটি অন্তর্ভুক্ত করেছি:

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

ফলাফল ছিল: পোর্টফিলিও 1 ক্রাডো কম সুসেসো! আইডি = 3।

শুভেচ্ছান্তে

Answer 9

যদি এখনও কেউ এর সাথে লড়াই করে তবে মাল্টিপেজ ফর্মটিতে ব্যবহারকারীর সেশন / ইউজারিডের উপর নজর রাখার চেষ্টা করার সময় আমারও একই সমস্যা হয়েছিল

Ive যোগ করে এটি স্থির

.উত্তরক্ষণে ("/ কিউ 2 /: ইউআইডি":

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

এবং ওয়েবফর্ম পৃষ্ঠাগুলির মধ্যে প্যারামগুলি পাস করার জন্য এটি একটি লুকানো ক্ষেত্র হিসাবে যুক্ত করেছে

<< ইনপুট প্রকার = "লুকানো" প্রয়োজনীয় এনজি-মডেল = "formData.userid" ng-init = "formData.userid = 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

কোডের নীচে এই আইএফএফ এর জন্য এটি একই ক্রমে কাজ করবে যেমন উল্লেখ করা হয়েছে যে আপনি অর্ডার করেছেন নাম, এনজি-মডেল এনজি-থ্রি, মান টাইপ করা হয়েছে তা নিশ্চিত করুন। এটাই.

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