AngularJS - কোনও এনজি-মডেল ব্যবহার করার সময় কোনও ইনপুট পাঠ্য বাক্সে মান বৈশিষ্ট্যটি উপেক্ষা করা হয়?

Question

অ্যাঙ্গুলারজেএস ব্যবহার করে যদি আমি নীচে "বব" এর মতো কিছুতে একটি সাধারণ ইনপুট পাঠ্য বাক্সের মান সেট করি। ng-modelবৈশিষ্ট্যটি যুক্ত করা হলে মানটি প্রদর্শিত হয় না ।

    <input type="text"
           id="rootFolder"
           ng-model="rootFolders"
           disabled="disabled"
           value="Bob"
           size="40"/>

এই ইনপুটটিকে কোনও কিছুর কাছে ডিফল্ট করতে এবং চালিয়ে যাওয়ার জন্য যে কেউ একটি সাধারণ কাজ সম্পর্কে জানে ng-model? আমি ng-bindডিফল্ট মান সহ একটি ব্যবহার করার চেষ্টা করেছি তবে এটি তেমন কার্যকর হয় না বলে মনে হয়।

Answer 1

এটি পছন্দসই আচরণ, আপনার নিয়ন্ত্রণে মডেলটি সংজ্ঞায়িত করা উচিত, দৃষ্টিতে নয়।

<div ng-controller="Main">
  <input type="text" ng-model="rootFolders">
</div>


function Main($scope) {
  $scope.rootFolders = 'bob';
}

Comments

ধন্যবাদ। তবে এই ক্ষেত্রে, মডেলটি নিয়ামকটিতে সেট করা আছে। এবং কৌণিক দস্তাবেজে, সর্বদা একই থাকে, ডেটা নিয়ামক সেট করা হয়। তবে আমার নিয়ামক একটি জেএস ফাইলে। যখন "সম্পাদনা" ফর্মটি করবেন তখন কীভাবে করবেন? "কৌণিক উপায়ে" নিয়ন্ত্রকের ডিফল্ট ফর্ম ডেটা কীভাবে পাস করবেন?

— বাইস্ক্রিপ্টস

এটি আমার পক্ষে কাজ করে না তবে মার্ক রাজককের (এনজি-আরিন = "রুটফোল্ডারস = 'বব'") দেখানো অতিরিক্ত গুণাবলী এনজি-থাই যুক্ত করে কাজ করে fine

— কাইজার লক্ষ্মীধার

এবং যদি আমার কাছে একটি ইনপুট ক্ষেত্র থাকে যেমন: <ইনপুট টাইপ = "নাম্বার" এনজি-মডেল = "নতুন ট্রান্সজেকশন [$ সূচক] [ইউজার.ইমেইল]" /> থাকে তবে আমি কীভাবে ডিফল্ট মান সেট করব?

— shish

Answer 2

ভোজটা "কৌণিক উপায়ে" বর্ণনা করেছেন, তবে আপনার যদি সত্যিই এই কাজটি করা দরকার তবে @urbanek সম্প্রতি এনজি-থিম ব্যবহার করে একটি কাজ পোস্ট করেছেন:

<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">

https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ

Comments

আপনার প্রয়োজন হতে পারে 'মান = "বব"' অংশের প্রয়োজন নেই।

— রাজকক

+1 তবে, লিঙ্কযুক্ত আলোচনার একটি পোস্টে যেমন উল্লেখ করা হয়েছে, এড়ানো উচিত (যুক্তিসঙ্গতভাবে এটি কম সঠিক এবং এটি পরীক্ষা আরও শক্ত করে তোলে)।

— 0xc0de

আপনি যদি v1.2 তে কোনও মডেল মান ব্যবহার করেন তবে এই পদ্ধতিটি দুর্দান্ত কাজ করে। <... ng-init = "rootFolders = someModelAttribute" ...>

— dmcqu314

@ মারকরাজাকোক, আপনার স্ট্যাক ওভারফ্লোতে এত দুর্দান্ত অ্যাংুলারজেএস পোস্টিং রয়েছে! আপনি SO সম্প্রদায়ের সাথে আপনার অন্তর্দৃষ্টি ভাগ করে নেওয়ার জন্য যে সময় ব্যয় করেছেন তার জন্য ধন্যবাদ for আমি নিশ্চিত যে আমি অনেক রিলিভড বিকাশকারীদের পক্ষে কথা বলি যখন আপনি বলি যে আপনি আমাদের যে ঘন্টা বাঁচিয়েছেন তার জন্য আমরা আন্তরিকভাবে প্রশংসা করি!

— জেরেমি মরিটিজ

মার্কের উত্তরটিকে সত্যই প্রশংসা করুন কারণ এটি আমার সমস্যার সমাধান করেছে। আমি নিশ্চিত করি যে আমাদের value="Bob"ইনপুট ট্যাগে অংশ নিতে হবে না।

— দেবনার

Answer 3

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

• $parse().assign()কোনও এনজিমোডেল বৈশিষ্ট্য ছাড়াই ক্ষেত্রগুলিতে ব্যবহারের চেষ্টা করার আগে এনজিমোডেলের জন্য একটি চেক যুক্ত করা হয়েছে।
• assign()ফাংশন পরম ক্রম সংশোধন করে ।

app.directive('input', function ($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

Comments

এটি আমি খুঁজে পেয়েছি সেরা উত্তর! ... আমার সমস্যাটি একটি মার্জিত উপায়ে সমাধান করে। আমাকে একটি লুকানো ইনপুট (একটি সিমফনি ফর্ম টোকেন, সার্ভারে উত্পন্ন) -এ একটি মান ক্যাপচার করতে হয়েছিল।

— পাচিনএসভি

এটি কেবল চালাক নয়, সর্বোত্তম সমাধানও। আমার ক্ষেত্রে, আমি নিয়ামকের উপর এনজি-মডেলের ডিফল্ট মান সেট করতে পারি না কারণ একটি পিএইচপি ফর্ম, যদি সার্ভার-সাইডের বৈধতা ব্যর্থ হয় তবে ফর্মটি রিফ্রেশ হবে এবং এনজি-মডেলের যা কিছু আছে তা ইনপুট মানটি মুছে ফেলতে হবে খুব।

— লুইস এলিজন্ডো

এটি জাভাস্ক্রিপ্ট ছাড়াই কাজ করার জন্য যদি আপনি এইচটিএমএল ফর্মের একটি প্রাথমিক সংস্করণ চান তবে এটি সেরা সমাধান বলে মনে হচ্ছে।

— ড্যারেন 21

দুর্দান্ত সমাধান যা সত্যই কৌণিকের মধ্যেই একটি অ-ডিফল্ট কনফিগারযোগ্য বিকল্প হওয়া উচিত।

— গ্রেসি

আপনার সমাধানের জন্য ধন্যবাদ। আপনি কীভাবে নম্বর ইনপুট ইস্যু সমাধান করবেন? এটি একটি ত্রুটি নথি

— numfmt?

Answer 4

কৌণিক উপায়

এটি করার সঠিক কৌণিক উপায় হ'ল ফর্ম টেমপ্লেটে একটি একক পৃষ্ঠার অ্যাপ, এজেএক্স লিখুন, তারপরে এটি মডেল থেকে গতিশীল পপুলেট করুন। মডেলটি ফর্ম থেকে ডিফল্টরূপে পপুলেশন হয় না কারণ মডেলটি সত্যের একক উত্স। পরিবর্তে অ্যাঙ্গুলার অন্যভাবে চলে যাবে এবং মডেল থেকে ফর্মটি পপুল করার চেষ্টা করবে।

তবে, আপনার স্ক্র্যাচ থেকে আরম্ভ করার সময় নেই

আপনার যদি লিখিত কোনও অ্যাপ থাকে তবে এতে কিছু মোটামুটি বিশাল আর্কিটেকচারাল পরিবর্তন জড়িত থাকতে পারে। আপনি যদি স্ক্র্যাচ থেকে পুরো একক পৃষ্ঠার অ্যাপটি তৈরির পরিবর্তে কোনও বিদ্যমান ফর্মটি বাড়ানোর জন্য কৌণিক ব্যবহার করার চেষ্টা করছেন, আপনি ফর্মটি থেকে মানটি টানতে পারেন এবং নির্দেশের সাহায্যে লিঙ্ক টাইমে এটিকে স্কোপে সঞ্চয় করতে পারেন। এর পরে কৌণিকটি স্কোপের মানটিকে ফর্মের সাথে আবার বেঁধে সিঙ্কে রাখবে।

একটি নির্দেশনা ব্যবহার করে

আপনি ফর্ম থেকে মানটি টানতে এবং এটি বর্তমান স্কোপে লোড করতে তুলনামূলক সহজ নির্দেশিকা ব্যবহার করতে পারেন। এখানে আমি একটি initFromForm নির্দেশকে সংজ্ঞায়িত করেছি।

var myApp = angular.module("myApp", ['initFromForm']);

angular.module('initFromForm', [])
  .directive("initFromForm", function ($parse) {
    return {
      link: function (scope, element, attrs) {
        var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
        val = attrs.value;
        if (attrs.type === "number") {val = parseInt(val)}
        $parse(attr).assign(scope, val);
      }
    };
  });

আপনি দেখতে পাচ্ছেন যে আমি একটি মডেল নাম পেতে বেশ কয়েকটি ফ্যালব্যাক সংজ্ঞায়িত করেছি। আপনি এই নির্দেশকে এনজিএমডেল নির্দেশের সাথে একযোগে ব্যবহার করতে পারেন, বা আপনি যদি পছন্দ করেন তবে $ সুযোগ ব্যতীত অন্য কোনও কিছুকে আবদ্ধ করতে পারেন।

এটি এর মতো ব্যবহার করুন:

<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}

নোট করুন এটি টেক্সারিয়াসের সাথেও কাজ করবে এবং ড্রপডাউন নির্বাচন করবে।

<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}

Comments

এখানে একটি প্যাকড মডিউল রয়েছে যা এখানে বর্ণিত বর্ণনার অনুরূপ একটি সমাধান কার্যকর করে github.com/platanus/angular-keep-values

— আগস্টিন

দুর্দান্ত সমাধান, তবে এটি শুধুমাত্র সাথে কাজ করবে input="text"। আপনার যদি numberএটি থাকে তবে এটি নিক্ষেপ করবে মডেল number ডকস

— স্মোকসনেস

সংখ্যার সমর্থন করতে আপনি যোগ করতে পারেন if (attrs.type === "number") val = parseInt(val);

— 25:56

@ স্মোকসনেস - আপনি একেবারে সঠিক। আমি উত্তরটি আপডেট করেছি :)

— অতিপরিচয়তা

Answer 5

আপডেট: নিয়ামকযুক্ত আমার মূল উত্তরে DOM- সচেতন কোড রয়েছে, যা এইচটিএমএলের পক্ষে কৌণিক সম্মেলনগুলি ভঙ্গ করে। @ ডম্যাকারম্যান আমার উত্তরের একটি মন্তব্যে নির্দেশনার কথা উল্লেখ করেছিলেন এবং আমি এখন পর্যন্ত সম্পূর্ণরূপে এটি মিস করেছি। সেই ইনপুটটির সাথে, কৌনিক বা এইচটিএমএল কনভেনশনগুলি ভঙ্গ না করে এখানে এটি করার সঠিক উপায় :

---

উভয় পেতে একটি উপায় আছে - উপাদানটির মানটি ধরুন এবং মডেলটিকে কোনও নির্দেশে আপডেট করার জন্য এটি ব্যবহার করুন:

<div ng-controller="Main">
    <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>

এবং তারপর:

app.directive('input', ['$parse', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if(attrs.value) {
                $parse(attrs.ngModel).assign(scope, attrs.value);
            }
        }
    };
}]);

আপনি অবশ্যই valueমডেলটির মানটিতে সেট করার আগে বৈশিষ্ট্যটির সাথে আরও কিছু করার জন্য উপরের দিকনির্দেশকে সংশোধন করতে পারেন, এট্রিবিউটটিকে কৌণিক অভিব্যক্তি হিসাবে $parse(attrs.value, scope)বিবেচনা করা সহ value(যদিও আমি সম্ভবত এটির জন্য পৃথক [কাস্টম] অ্যাট্রিবিউট ব্যবহার করতাম, সুতরাং মানক এইচটিএমএল বৈশিষ্ট্যগুলি ধারাবাহিকভাবে ধ্রুবক হিসাবে বিবেচিত হয়)।

এছাড়াও, এনজি-মডেলের কাছে উপলভ্য ডেটা টেম্প্লেটেড তৈরির ক্ষেত্রে একই রকম প্রশ্ন রয়েছে যা আগ্রহীও হতে পারে।

Comments

আপনার নিয়ামকগুলিতে কোনও ডিওএম হেরফের / আবিষ্কার করা উচিত নয়। পরিবর্তে একটি নির্দেশ ব্যবহার করা উচিত।

— dmackerman

আমি আমার উত্তরে সেই অপূর্ণতা স্পষ্টভাবে উল্লেখ করেছি। আপনার করা উচিত নয় , তবে আপনি পারেন । এঙ্গুলারস বা এইচটিএমএল এর সম্মেলনগুলি অনুসরণ করা আপনার পক্ষে আরও গুরুত্বপূর্ণ মনে হয় কিনা তার উপর নির্ভর করে। কারণ কৌণিক এইচটিএমএল ভাঙে না।

— ড্যান হানসেকার

ওহ, আমি আছি একটি ডামি। কোনও নির্দেশিকা ব্যবহারের ক্ষেত্রে পুরোপুরি মিস হয়েছে। উত্তর অনুসারে আপডেট করা হয়েছে। আপনার কাছে হতাশার জন্য আন্তরিকভাবে দুঃখিত, @ ডম্যাকারম্যান।

— ড্যান হুনসেকার

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

— গগলমজর

আমি সাহায্য করতে পেরে আনন্দিত. অবশ্যই, সাধারণভাবে বলতে গেলে, আপনি আপনার সার্ভার-সাইড সামগ্রীটি JSON হিসাবে তৈরি করতে চান এবং সেই ভিত্তিতে আপনার অ্যাপ্লিকেশনটি মডেলটি চালিত করতে চান, তবে কখনও কখনও এটি অন্যান্য বিকল্পগুলির জন্য কার্যকর হয়, এবং এটি কেবল একটিই।

— ড্যান হুনসেকার

Answer 6

আপনি AngularJs ngModel নির্দেশ ব্যবহার করেন, তাহলে মনে রাখবেন যে মান valueঅ্যাট্রিবিউট না বেঁধে ngModel ক্ষেত্রের উপর .আপনি নিজের এবং সবচেয়ে ভালো উপায় এটা করতে দ্বারা এটি init করতে হবে, হয়

<input type="text"
       id="rootFolder"
       ng-init="rootFolders = 'Bob'"
       ng-model="rootFolders"
       disabled="disabled"
       value="Bob"
       size="40"/>

Comments

এটি নিয়ামকটির পরিবর্তে নির্দেশ / মার্কআপে এটিকে দ্বিধাবিভক্ত করতে অদ্ভুত মনে হয়।

— এলোমেলো_ ব্যবহারকারীর_নাম

Answer 7

এটি পূর্বের উত্তরগুলিতে সামান্য পরিবর্তন ...

$ পার্সের দরকার নেই

angular.directive('input', [function () {
  'use strict';

  var directiveDefinitionObject = {
    restrict: 'E',
    require: '?ngModel',
    link: function postLink(scope, iElement, iAttrs, ngModelController) {
      if (iAttrs.value && ngModelController) {
        ngModelController.$setViewValue(iAttrs.value);
      }
    }
  };

  return directiveDefinitionObject;
}]);

Comments

মনে রাখবেন যে এনজিওমোডেল কনট্রোলার V

— অতুল চৌধুরী চৌধুরী

Answer 8

হাই আপনি মডেল আরম্ভ সঙ্গে পদ্ধতি নীচে চেষ্টা করতে পারেন।

আপনি এখানে টেক্সটবক্সের এনজি-মডেলটি দুটি উপায়ে শুরু করতে পারেন

- এনজি-থ্রি ব্যবহারের সাথে

- জেএসে $ স্কোপ ব্যবহারের সাথে

<!doctype html>
 <html >
 <head>
        <title>Angular js initalize with ng-init and scope</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
    <h3>Initialize value with ng-init</h3>
    <!-- Initlialize model values with ng-init -->
    <div ng-init="user={fullname:'Bhaskar Bhatt',email:'[e-mail]',address:'Ahmedabad'};">
        Name : <input type="text" ng-model="user.fullname" /><br/>
        Email : <input type="text" ng-model="user.email" /><br/>
        Address:<input type="text" ng-model="user.address" /><br/>

    </div>  
    <!-- initialize with js controller scope -->
    <h3>Initialize with js controller</h3>

    <div  ng-controller="alpha">
        Age:<input type="text" name="age" ng-model="user.age" /><br/>
        Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
        Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
    </div>  

</body> 
<script type="text/javascript">
        angular.module("app",[])
        .controller("alpha",function($scope){
            $scope.user={};
            $scope.user.age=27;
            $scope.user.exp="4+ years";
            $scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
        });

     </script>
 </html>                

Answer 9

সমস্যাটি হ'ল আপনাকে এনজি-মডেলটি প্যারেন্ট এলিমেন্টে সেট করতে হবে যেখানে আপনি এনজি-মান / মান সেট করতে চান। কৌণিক দ্বারা উল্লিখিত:

এটি মূলত ইনপুট [রেডিও] এবং বিকল্প উপাদানগুলিতে ব্যবহৃত হয়, যাতে যখন উপাদানটি নির্বাচিত হয়, তখন সেই উপাদানটির এনজিমোডেল (বা এটির নির্বাচিত প্যারেন্ট উপাদান) বাউন্ড মানকে সেট করা হয়।

উদাহরণস্বরূপ: এটি একটি সম্পাদিত কোড:

<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
  <input name="radioClick" type="radio"  ng-click="vm.setPeerGrp('market');" 
         ng-value="vm.settingsObj.MarketPeers" 
         style="position:absolute;margin-left: 9px;">
  <div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>

দ্রষ্টব্য: এই উপরের ক্ষেত্রে আমি এনজি-মডেল এবং মানটির জেএসওএন প্রতিক্রিয়া পেয়েছি, আমি জেএস অবজেক্টে "মার্কেটপিয়ার্স" হিসাবে অন্য একটি সম্পত্তি যুক্ত করছি। সুতরাং মডেল এবং মান প্রয়োজন অনুযায়ী নির্ভর করতে পারে, তবে আমি মনে করি এই প্রক্রিয়াটি এনজি-মডেল এবং মান উভয়ই পেতে পারে তবে একই উপাদানের সাথে সেগুলি না রাখে।

Answer 10

আমি একই সমস্যা ছিল। আমি value="something"প্রদর্শন করতে এবং সম্পাদনা করতে সক্ষম হচ্ছিলাম না। <input>এনজিও মডেল ঘোষিত হওয়ার সাথে সাথে আমাকে নীচের কমান্ডটি ব্যবহার করতে হয়েছিল ।

[(ngModel)]=userDataToPass.pinCode

আমার কাছে যেখানে অবজেক্টে থাকা ডেটাগুলির তালিকা রয়েছে userDataToPassএবং আমার যে আইটেমটি প্রদর্শন করতে এবং সম্পাদনা করতে হবে তা হ'ল pinCode।

একই জন্য, আমি এই ইউটিউব ভিডিও উল্লেখ

Comments

এই উপায়টির জন্য, ওপিটি কৌণিক

— জেএস