এনজি-মডেল নিয়ামক মান আপডেট করে না

Question

সম্ভবত নির্বোধ প্রশ্ন, তবে আমার সাধারণ ইনপুট এবং বোতাম সহ আমার এইচটিএমএল ফর্ম রয়েছে:

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

তারপরে নিয়ামকটিতে (টেমপ্লেট এবং নিয়ামককে রুটপ্রাইডার থেকে কল করা হয়):

$scope.check = function () {
    console.log($scope.searchText);
}

আমি কেন ভিউটি সঠিকভাবে আপডেট হয়েছে তবে বোতামটি ক্লিক করার সময় কনসোলটিতে অপরিজ্ঞাত আছে?

ধন্যবাদ!

আপডেট: দেখে মনে হচ্ছে যে আমি আসলে এই সমস্যাটি সমাধান করেছি (এর আগে কিছুটা সমাধানের সাথে সামনে আসতে হয়েছিল) সাথে: কেবলমাত্র আমার সম্পত্তির নাম থেকে পরিবর্তন searchTextকরতে হবে search.text, তারপরে $scope.search = {};নিয়ামক এবং ভয়েলাতে খালি বস্তুটি সংজ্ঞায়িত করুন ... কেন এটি কাজ করছে তা সম্পর্কে কোনও ধারণা নেই যদিও;]

Comments

আপনি কি নথির এই অংশে এই নিয়ামকটি ব্যবহার করছেন তা নিশ্চিত? আপনি একটি ন্যূনতম ব্যর্থতার উদাহরণ পোস্ট করতে পারেন?

— অহঙ্কারী

হ্যাঁ, কন্ট্রোলার ঠিক আছে বলে 100% নিশ্চিত, সমস্যাটি আমার কাছে পরিচিত বলে মনে হচ্ছে ... আশ্চর্যরকমভাবে এটি কাজ করে যখন আমি সম্পত্তিটির নাম পরিবর্তন করে searchTextরাখি search.text, কেন কোনও ধারণা কেন ??

— আলকেমিকেশন

@ আর্থার: এটি স্পষ্ট নয় তবে এনজি-মডেল কেবল আপনার দৃষ্টিতে এক ধরণের স্পিক লোকাল ভেরিয়েবল তৈরি করে, সেখানে যদি আপনি এটি এভাবে রাখতে চান তবে আপনাকে এটি চেক () ফাংশনে পাস করতে হবে, যেমন: চেক ( অনুসন্ধানের পাঠ্য) এবং আপনার নিয়ামক তখন তা সনাক্ত করবে। আশা করি এটা সাহায্য করে

— alchemication

রেকর্ডের জন্য, এটা বানান এর voilaনা vuala, wollaইত্যাদি

— ড্যান Bechard

আমি মনে করি আপনি যে উত্তরটি সন্ধান করছেন তা হ'ল স্ট্যাকওভারফ্লো

— উইলা

Answer 1

সংস্করণ হিসাবে নিয়ামক (প্রস্তাবিত)

এখানে টেমপ্লেট

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

জেএস

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

উদাহরণ: http://codepen.io/Damax/pen/rjawoO

কৌণিক 2.x বা কৌণিক 1.5 বা উচ্চতর সহ উপাদানটি ব্যবহার করা সবচেয়ে ভাল

########

পুরানো উপায় (প্রস্তাবিত নয়)

এটি সুপারিশ করা হয় না কারণ স্ট্রিং একটি আদিম, পরিবর্তে কোনও বস্তু ব্যবহারের জন্য অত্যন্ত প্রস্তাবিত

আপনার মার্কআপ এ চেষ্টা করুন

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

এবং এটি আপনার নিয়ামক মধ্যে

$scope.check = function (searchText) {
    console.log(searchText);
}

Comments

এটি কেবল একমুখী কাজ করে ... আপনি যদি এর মান পরিবর্তন করতে চান তবে কী হবে searchText?

— সিডিএমকেই

এটি "কেন" জবাব দেয় না? প্রশ্ন।

— সিডিএমকেই

আমি যদি কোনও বোতাম ব্যবহার করতে না চাই তবে কী হবে? উদাহরণস্বরূপ আমাকে

— এন্টারে

সানিকো => এন্ট্রি জমা দেওয়ার জন্য আপনাকে অবশ্যই ফর্ম ট্যাগটি ব্যবহার করতে হবে এবং এটিতে এনজি-সাবমিট করতে হবে ( ডকস.আঙ্গুলারজেএস.আর.পিআই /ng.directive:ng সাবমিট )

— ড্যামাক্স

@ এইচপি এর 411 কারণ এটি একটি স্ট্রিং আদিম। যখন কৌণিক মান নির্ধারণ করে যখন এটি পয়েন্টারটিকে মানকে পরিবর্তন করে, তাই নিয়ামক পুরানো মানটির দিকে নজর রাখেন কারণ এর মানটিতে পুরানো পয়েন্টার থাকে।

— দামাস

Answer 2

"আপনি যদি এনজি-মডেল ব্যবহার করেন তবে আপনাকে সেখানে একটি বিন্দু রাখতে হবে।"
আপনার মডেলটিকে কোনও অবজেক্টে চিহ্নিত করুন p প্রপার্টি এবং আপনি যেতে ভাল।

নিয়ামক

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

টেমপ্লেট

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

চাইল্ড স্কোপগুলি খেলতে হয় এমন ক্ষেত্রে ঘটে - যেমন শিশু রুট বা এনজি-পুনরাবৃত্তি। শিশু-স্কোপটি তার নিজস্ব মান তৈরি করে এবং এখানে বর্ণিত হিসাবে একটি নামের দ্বন্দ্বের জন্ম হয় :

আরও তথ্যের জন্য এই ভিডিও ক্লিপটি দেখুন: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

Comments

এটিই আসল উত্তর।

— ক্যাসলার্ট

@ ক্যাটফিশ প্রোটোটাইপাল উত্তরাধিকারের সাথে, যখনই আপনি সন্তানের সম্পত্তিতে লিখেন, পিতামাতার সম্পত্তির সাথে রেফারেন্স / সংযোগটি বন্ধ হয়ে যায়। কৌণিক স্কোপগুলি যেভাবে মডেল করে, আপনার যদি বিন্দু না থাকে তবে আপনার সন্তানের সুযোগের মধ্যে একটি নতুন সম্পত্তি তৈরি করা হবে। এই ভিডিওটি এটিকে আরও বিশদে ব্যাখ্যা করেছে: youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m

— উইল স্টার

গ্রেসিয়াস বস। এটা সত্য! যাইহোক, আমি কেবল আয়নিক কাঠামোর সাথে ব্যবহার করার সময় সমস্যার মুখোমুখি হওয়ায় এটি একটি সামঞ্জস্যপূর্ণ কৌতুক বলে মনে হচ্ছে না

— ডন ব্যারি

@ ব্যবহারকারী3677331 আপনার কোনও সন্তানের সুযোগ না পাওয়া পর্যন্ত এটি বিন্দু ছাড়াই ঠিক কাজ করে (উদাহরণস্বরূপ এনজি-রিপিটের অভ্যন্তরের কোনও আইটেমের মতো)। বলুন আপনার মডেলের নামটি "ফোন" ছিল আপনার সন্তানের স্কোপ "ফোন" তৈরি করে, তারপরে আপনি সুযোগের দ্বন্দ্ব পেতে পারেন কারণ চাইল্ড-স্কোপটিতে "ফোন" ভেরিয়েবল থাকে এবং সুতরাং পিতামাতার স্কোপে "ফোন" অ্যাক্সেস করতে পারে না। যেখানে শিশু স্কোপটি ইউজার.ফোন তৈরি করে, এটি পিতামাতার ব্যবহারকারীর অবজেক্টে যুক্ত করা হবে যাতে উভয় স্কোপ একই বস্তুর দিকে ইশারা করে

— উইল স্টার্ন

খুব উপকারী. আমি নিশ্চিত ছিলাম না যে আমি তুলনামূলকভাবে অস্পষ্ট প্রশ্নের উত্তর খুঁজতে পারি তবে এটি মারা গিয়েছিল।

— কোডম্যানিয়াক

Answer 3

অ্যাঙ্গুলারজেএস বই পি .99 সহ ওয়েব অ্যাপ্লিকেশন ডেভলপমেন্টে মাস্টারিংয়ের ক্ষেত্রে এটি লেখা আছে

সুযোগের বৈশিষ্ট্যগুলির সাথে সরাসরি বাঁধন এড়িয়ে চলুন। বস্তুর বৈশিষ্ট্যগুলিতে দ্বি-মুখী ডেটা বাঁধাই (কোনও স্কোপের উপরে প্রকাশিত) একটি পছন্দসই পদ্ধতি। থাম্বের নিয়ম হিসাবে, আপনার এনজি-মডেল নির্দেশকে (উদাহরণস্বরূপ, এনজি-মডেল = "জিনিস.নেম") সরবরাহ করা একটি অভিব্যক্তিতে একটি বিন্দু থাকা উচিত।

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

Comments

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

— কিং

Answer 4

কাজের thisপরিবর্তে ব্যবহার করা হচ্ছে $scope।

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

সম্পাদনা: এই উত্তরটি লেখার সময়, আমার এর চেয়ে অনেক জটিল পরিস্থিতি ছিল। মন্তব্যের পরে, কেন এটি কাজ করে তা বুঝতে আমি এটি পুনরুত্পাদন করার চেষ্টা করেছি, তবে ভাগ্য নেই। আমি মনে করি যে কোনওভাবে (সত্যিই কেন জানি না) একটি নতুন সন্তানের সুযোগ তৈরি হয়েছে এবং thisসেই সুযোগটি বোঝায়। তবে যদি $scopeএটি ব্যবহার করা হয় তবে এটি জাভাস্ক্রিপ্টের লিক্সিকাল স্কোপের কারণে প্যারেন্ট-স্কোপটিকে প্রকৃতপক্ষে বোঝায় বৈশিষ্ট্যটির ।

এই সমস্যাটি নিয়ে কেউ যদি এইভাবে পরীক্ষা করে আমাদের জানান তবে দুর্দান্ত হবে।

Comments

— নির্দোষ

দেখে মনে হচ্ছে যে সংযুক্ত ফাংশনগুলি $scopeএকটি নতুন সুযোগ তৈরি করে (যেমন ফাংশনে check(), thisএমন একটি স্কোপকে বোঝায় যা একটি শিশু স্কোপ $scope)। এটা এমন কেন? আপনি কিছু ব্যাখ্যা দিতে পারেন?

— জুন ইয়ং

এই ক্ষেত্রে আমার কেন '$ সুযোগের পরিবর্তে' এটি ব্যবহার করা উচিত? কারণ এটি আমার আগের প্রকল্পে $ স্কোপ ব্যবহার করে কাজ করেছে তবে এবার একই জিনিসটি $ সুযোগ ব্যবহার করে কাজ করে না। তবে 'এটি' কাজ করেছে। তা কেন?

— রাশেদুল। রুবেল

এটি কাজ করে, তবে আপনি যদি বলেন this.searchText = "something else"বা এমনকি বলেন $scope.searchText = "something else", এটি ভিউ আপডেট করে না। আপনি এই সমস্যা ব্যাখ্যা করতে পারেন?

— শ্রী

এটা করা উচিত। আমি উপরের কোডটি ব্যবহার করে এটি চেষ্টা করেছি, এটি ভিউটি আপডেট করেছে।

— ফেয়িয়াজ

Answer 5

আমারও একই সমস্যা ছিল এবং এটি আমার নিয়ামকের শীর্ষে প্রথমে ফাঁকা বস্তু ঘোষনা না করার কারণে ঘটেছিল:

$scope.model = {}

<input ng-model="model.firstProperty">

আশা করি এটি আপনার পক্ষে কাজ করবে!

Answer 6

একটি অ-তুচ্ছ দৃষ্টিভঙ্গি (সেখানে নেস্টেড স্কোপস রয়েছে) এর সাথে ডিল করার সময় আমি একই সমস্যাটি দেখতে পেয়েছি। জাভা স্ক্রিপ্টের প্রোটোটাইপ-ভিত্তিক উত্তরাধিকারের প্রকৃতির কারণে অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন বিকাশ করার সময় এবং অবশেষে এটি আবিষ্কার করা একটি জটিল কৌশল। AngularJS নেস্টেড স্কোপগুলি এই প্রক্রিয়াটির মাধ্যমে তৈরি করা হয়। এবং এনজি-মডেল থেকে তৈরি মানটি বাচ্চাদের স্কোপে স্থাপন করা হয়, প্যারেন্ট স্কোপটি বলে না (সম্ভবত যেটি কন্ট্রোলারে ইনজেকশন করা হয়) সেটির মান দেখতে পাবে না, মান বিন্দু ব্যবহার না করা হলে প্যারেন্ট স্কোপে সংজ্ঞায়িত একই নামের কোনও সম্পত্তিকেও ছায়া দিবে প্রোটোটাইপ রেফারেন্স অ্যাক্সেস প্রয়োগ করতে। আরও বিশদের জন্য, এই সমস্যাটি চিত্রিত করার জন্য নির্দিষ্ট অনলাইন ভিডিওটি চেকআউট করুন, http://egghead.io/video/angularjs-the-dot/ এবং এটি অনুসরণ করার জন্য মন্তব্যগুলি।

Answer 7

এই ফিডলটি দেখুন http://jsfiddle.net/ganarajpr/MSjqL/

আপনি যা করছিলেন ঠিক তা আমি করেছি (আমি ধরে নিলাম!) কাজটি করছে বলে মনে হচ্ছে। আপনার জন্য এখানে কী কাজ করছে না তা পরীক্ষা করতে পারেন?

Comments

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

— আলকেমিকেশন

কেন এটি আপনার পক্ষে কাজ করে না আমি সত্যিই নিশ্চিত নই। আপনি যদি এই বিষয়টিকে কোনও ঝাঁকুনিতে বিচ্ছিন্ন করতে পারতেন তবে আমি অনুমান করি যে কেউ আপনাকে এর চেয়ে ভাল উত্তর দিতে সক্ষম হবে :)

— ganaraj

ঠিক আছে, এখনই কাজ শেষ করবে, তবে আগামীকাল বা সন্ধ্যায় নিশ্চিতভাবে তা করবে, চিয়ার্স! আমি আমার সিটিআরএলটির যেভাবে নাম দিয়েছি তাতে কোনও সমস্যা হতে পারে, আমরা দেখব ...

— Alchemication

Answer 8

যেহেতু কেউ এটি উল্লেখ করেনি $parentতাই আবদ্ধ সম্পত্তি যুক্ত করে সমস্যার সমাধান করা যায় না

<div ng-controller="LoginController">
    <input type="text" name="login" class="form-control" ng-model="$parent.ssn" ng-pattern="/\d{6,8}-\d{4}|\d{10,12}/" ng-required="true" />
    <button class="button-big" type="submit" ng-click="BankLogin()" ng-disabled="!bankidForm.login.$valid">Logga in</button>
</div>

এবং নিয়ামক

app.controller("LoginController", ['$scope', function ($scope) {
    $scope.ssn = '';

    $scope.BankLogin = function () {
        console.log($scope.ssn); // works!
    };
}]);

Comments

উত্তরের জন্য ধন্যবাদ, তবে কি এই কাজ করছে? এটি আদর্শভাবে একই স্কোপ এলিমেন্টে কাজ করা উচিত, না বাবা-মা?

— ভি 31

Answer 9

আমার জন্য সমস্যাটি আমার ডেটাগুলি কোনও বস্তুতে জমা করে (এখানে "ডেটাস") দিয়ে সমাধান করা হয়েছিল।

NgApp.controller('MyController', function($scope) {

   $scope.my_title = ""; // This don't work in ng-click function called

   $scope.datas = {
      'my_title' : "",
   };

   $scope.doAction = function() {
         console.log($scope.my_title); // bad value
         console.log($scope.datas.my_title); // Good Value binded by'ng-model'
   }
   

});

আমি আশা করি এটি সাহায্য করবে

Comments

এখানে খুব সামান্য বিষয়, তবে 'ডেটা' '

— ডাটাম

@ ঠেঠাকুড়ি এবং হাদীসের "দাতুম" হ'ল "তারিখ", সুতরাং আমি নিশ্চিত যে এটি ব্যবহার করব না: পি

— এপিকপান্ডাফোরস

আমি আইএইচপি

— নিকো ওয়েস্টারডেল

Answer 10

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

সমস্যা সমাধানের জন্য, কেবল রুট-বোঝা এইচটিএমএল সামগ্রীগুলির মধ্যে একটি ডেডিকেটেড নিয়ামক ব্যবহার করুন।

Answer 11

ng-keypressইনপুট পাঠ্যের জন্য প্রবেশ এবং ng-clickআইকনটির জন্য অনুসন্ধান সন্ধান করতে আপনি এটি করতে পারেন :

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

Answer 12

আমারও একই সমস্যা ছিল।
সঠিক উপায়টি হ'ল 'অনুসন্ধানের পাঠ্য'টিকে কোনও বস্তুর অভ্যন্তরের সম্পত্তি হিসাবে সেট করে।

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

<input type="text" ng-model="searchText" value={{searchText}} />

এইভাবে মানটি কেবল '$ স্কোপ.সর্চটেক্সট' মানে সেট করা আছে এবং ইনপুট মান পরিবর্তিত হলে এটি আপডেট করা হবে।

আমি জানি যে এটি একটি কার্যকরী, তবে এটি আমার পক্ষে কাজ করেছে ..

Answer 13

আমি একই সমস্যার মুখোমুখি হয়েছি ... রেজোলিউশন যা আমার পক্ষে কাজ করেছিল তা হ'ল এই কীওয়ার্ডটি ব্যবহার করা ..........

সতর্কতা (this.ModelName);