JQuery এর সাথে ইনপুট মান সেট করার পরে কৌণিক মডেল আপডেট করুন

160

আমার এই সাধারণ দৃশ্য আছে:

ইনপুট উপাদান যা মান jQuery এর ভ্যাল () পদ্ধতি দ্বারা পরিবর্তন করা হয়।

আমি jQuery সেট মান সহ কৌনিক মডেল আপডেট করার চেষ্টা করছি। আমি একটি সাধারণ নির্দেশ লেখার চেষ্টা করেছি, তবে এটি আমার যা ইচ্ছা তা করছে না।

নির্দেশটি এখানে:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

এটি jQuery অংশ:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

এবং এইচটিএমএল:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

আমার চেষ্টাটির সাথে এই মজার ভাবটি এখানে:
http://jsfiddle.net/U3pVM/743/

কেউ দয়া করে আমাকে সঠিক দিকে নির্দেশ করতে পারেন?

— মিশাল জে।
সূত্র

2

নির্দেশাবলীর বাইরে অ্যাংুলারজেএস এবং জিকুয়েরি মিশ্রন করা প্রায়শই খারাপ ধারণা। আপনি যা করতে চান তার জন্য jQuery বাধ্যতামূলক?

— ব্ল্যাকহোল

মডেলের মান পরিবর্তন করতে আপনি কেন কন্ট্রোলারের কোনও ফাংশনে কৌনিকযুক্ত ক্লিক ইভেন্ট সেট করবেন না?

— জিমি কানে

ব্ল্যাকহোল, আমি জকিউরি আপলোড প্লাগইন ব্যবহার করছি যা এটির কাজ করে এবং লুকানো ইনপুটটিতে আপলোড করা ফাইলের পথ রাখে। কৌনিক মডেলটিতে আমার কেবল প্রয়োজন সেই পথে অ্যাক্সেস। সুতরাং আমি ভেবেছিলাম আমি এটি লুকানো ইনপুটটির মান হিসাবে সেট করব এবং এটি পরিবর্তিত হওয়ার পরে কৌণিক মডেলটি আপডেট করব।

— মিশাল জে

আমি আপনার কোলাহলে জিকিউরি কলটি দেখতে পাচ্ছি না ... আপনি কি জিকিউ দিয়ে মান পরিবর্তন করেছেন তা পরীক্ষা করে চিহ্নিত করতে পারেন?

— ভ্যালেন্টাইন শায়বানভ

আপনার টোডো কোনও টডো নমুনা অ্যাপ্লিকেশনে লিঙ্ক করেছে, যা এই প্রশ্নের সাথে সম্পর্কিত নয়।

— স্টিউই

322

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

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

এই নির্দিষ্ট আচরণের ব্যাখ্যার জন্য এই উত্তরটি যা আমি কিছুক্ষণ আগে দিয়েছিলাম তা পরীক্ষা করে দেখুন: " অ্যাঙ্গুলারজেএস কীভাবে অভ্যন্তরীণভাবে 'অনক্লিক', 'ওঞ্চেঞ্জ' এর মতো ইভেন্টগুলি ধরবে? "

তবে দুর্ভাগ্যক্রমে, এটি আপনার একমাত্র সমস্যা নয়। অন্যান্য পোস্ট মন্তব্যে নির্দেশিত হিসাবে, আপনার jQuery কেন্দ্রিক দৃষ্টিভঙ্গি সাধারণ ভুল। আরও তথ্যের জন্য এই পোস্টটি একবার দেখুন: আমার কাছে jQuery ব্যাকগ্রাউন্ড থাকলে আমি কীভাবে "AngularJS এ ভাবি"? )।

— Stewie
সূত্র

5

শান্ত! একটি ব্যতিক্রম সহ: কেন এটি লুকানো ইনপুটগুলিতে কাজ করে না? আমি যখন আমার ইনপুট ধরণের পাঠ্যে স্যুইচ করি তখন এটি প্রত্যাশার মতো কাজ করে।

— করোল

8

Jquery ক্যালেন্ডার প্লাগইন ব্যবহার করার সময় এটি একটি বড় সমস্যা সমাধান করেছে। ইনপুট.ওয়াল () এর পরে ট্রিগার ('ইনপুট') তে প্লাগইন হ্যাক করে ব্যবহারকারী ক্যালেন্ডারের তারিখটি নির্বাচনের পরে এনজি-চেঞ্জ ইভেন্টটি চালিয়ে যায়। ধন্যবাদ!

— ড্রোন ব্রেন

3

লুকানো ইনপুটটিতে নিখুঁত কাজ করে: এলিমেন্ট.ট্রিগারহ্যান্ডলার ("পরিবর্তন");

— ফলক

2

এটি আমার পক্ষে কাজ করে না। $ ( "# দূরত্ব") Val (তথ্য)। $ ( "# দূরত্ব") ট্রিগার ( 'ইনপুট')।

— স্টাস সোভিশভ

10

কৌণিক 1.4.3 সহ, inputইভেন্ট আইই 11 সহ আইই তে কাজ করে না। inputঘটনা শুধুমাত্র কাজ করে যখন $sniff.hasEvent('input')সত্য কিন্তু $sniff.hasEvent('input')IE11 মিথ্যা এমনকি হয়! পরিবর্তে আমরা changeইভেন্টটি ব্যবহার করতে পারি ।

— শুহেই কাগওয়া

61

আশা করি এটি কারও জন্য কার্যকর is

আমি jQuery('#myInputElement').trigger('input')ইভেন্টটি আমার কৌণিক অ্যাপ্লিকেশনটি নিতে পারাতে অক্ষম ।

আমি যাইহোক, angular.element(jQuery('#myInputElement')).triggerHandler('input')নিতে পারা সক্ষম ছিল ।

— ginman
সূত্র

2

সমাধানটি কেবল কোডটি লিখবেন না দয়া করে ব্যাখ্যা করুন। আমি

— কৌনিকটি পাই

1

j এখানে jQuery উপস্থাপন করে। এটি প্রশ্নে ট্যাগ করা হয়।

— জিনম্যান

এটি আমার পক্ষেও কাজ করেছিল যখন $ ('myInputElement')। ট্রিগার ('ইনপুট') ফ্ল্যাশ ছিল। এটি এলোমেলোভাবে কখনও কখনও কাজ করে বলে মনে হয়েছিল তবে অন্যদের নয় এবং আমি কখনই কোনও প্যাটার্ন স্থাপন করতে পারি নি। এই সমাধানটি প্রতিবার কাজ করে।

— ব্রায়ানপি

2

আমার # উপসর্গ নিয়ে কাজ করা হয়েছে:angular.element($('#myInputElement')).triggerHandler('input')

— এবরু ইয়েনার

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

— মাওনির

25

inputJQuery এর সাথে ইভেন্টটি ট্রিগার করেছিল এমন স্বীকৃত উত্তরটি আমার পক্ষে কার্যকর হয়নি। একটি ইভেন্ট তৈরি এবং স্থানীয় জাভাস্ক্রিপ্টের সাথে প্রেরণ কৌশলটি করেছে did

$("input")[0].dispatchEvent(new Event("input", { bubbles: true }));

— মার্টিনস বালোডিস
সূত্র

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

— লার্স-এরিক

স্ক্রিপ্টে একটি ইনপুট সেট করার সময় আমি ফর্ম বৈধতা ট্রিগার করার জন্য নেটিভ জেএস পদ্ধতির সন্ধান করছিলাম এবং এটি আমার জন্য কাজ করেছে, ধন্যবাদ।

— ছড়িয়ে দিন

এমনকি কৌণিক 5 সঙ্গে কাজ করে, দুর্দান্ত!

— ইগোর

ধন্যবাদ. ওয়েবভিউ.এভালুয়াটিজাভাস্ক্রিপ্টে বিশেষত সহায়ক

— বেরি উইং

22

আমি মনে করি না এখানে jQuery প্রয়োজন।

আপনি পরিবর্তে $ ঘড়ি এবং এনজি-ক্লিক ব্যবহার করতে পারেন

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

আপনার নিয়ামক মধ্যে:

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});

— Utopik
সূত্র

1

আপনাকে ধন্যবাদ ইউটোপিক, আপনি ঠিক বলেছেন, কৌণিক ব্যবহার করে কীভাবে কাজ করার কোনও উপায় আছে তখন আমার কৌণিকের সাথে jquery মিশ্রিত করা উচিত নয়।

— মিশাল জে

17

নির্দিষ্ট ইনপুট মডেলটির সুযোগটি নিম্নরূপ আপডেট করতে আপনাকে নিম্নলিখিত কোডটি ব্যবহার করতে হবে

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

— jayM
সূত্র

1

var scope = angular.element($("select")).scope();     scope.$apply(function(){         scope.selectValue = newVal;     });

এই অংশটি আমাকে অনেক সাহায্য করেছিল। আমার ইস্যুটি সাফল্যের ফাংশনে একটি জ্যাকোরি এজ্যাক্স কল করার পরে একটি কৌণিক মডেল আপডেট করছে। এটি $ HTTP সহ ধীর ছিল কারণ উপাদানটির জন্য সদৃশ পরিবর্তন ইভেন্ট শ্রোতা ছিল যে অন্য কিছু করছিল তাই আমি এটিকে jQuery এ একীভূত করলাম।

— ইমমানুয়েল মাহুনি

1

এলিমেন্ট.স্কোপ () এর ব্যবহার একটি খারাপ ধারণা, কারণ এটি কেবল লগিং সক্ষম দ্বারা কাজ করে। আপনি যদি কোনও প্রোডাকশন সাইটে থাকেন তবে আপনার কনফিগারেশনে লগিং নিষ্ক্রিয় করা উচিত $compileProvider.debugInfoEnabled(false);বা আরও তথ্যের জন্য কোড. angularjs.org/1.4.0/docs/guide/pr Proditions সহ $logProvider.debugEnabled(false);দেখুন ।

— RWAM

আমি লুকানো ভেরিয়েবলের জন্য এই পদ্ধতিটি চেষ্টা করেছি এবং এটি কার্যকর হয়েছে। var li_cuboid_id = $ ('# li_cuboid_id'); li_cuboid_id.val (json.cuboidId) .change (); var সুযোগ = কৌণিক.এলিমেন্ট ($ ("# li_cuboid_id")) স্কোপ (); সুযোগ। $ প্রয়োগ (ফাংশন () {স্কোপ.কময়েডআইডি = json.cuboidId;;); লুকানো ভেরিয়েবলটি এই হিসাবে সংজ্ঞায়িত করা হয়েছে: <ইনপুট আইডি = "li_cuboid_id" প্রকার = লুকানো এনজি-মডেল = "কিউবিডআইডি">

— রাহুল

7

আমি অ্যাকশন বোতামে শ্রোতা যুক্ত করে কেবল নিয়ামক সূচনাতে পরিবর্তন করেছি:

$(document).on('click', '#action-button', function () {
        $timeout(function () {
             angular.element($('#input')).triggerHandler('input');
        });
});

অন্যান্য সমাধানগুলি আমার ক্ষেত্রে কার্যকর হয়নি।

— এবরু ইয়েনার
সূত্র

4

আমি জানি এখানে উত্তর দিতে কিছুটা দেরি হয়েছে তবে সম্ভবত আমি দিনের কিছুটা সঞ্চয় করতে পারি।

আমি একই সমস্যা সঙ্গে ডিল করা হয়েছে। আপনি jQuery থেকে ইনপুটটির মান আপডেট করার পরে কোনও মডেল পপুলেশন করবে না। আমি ট্রিগার ইভেন্টগুলি ব্যবহার করার চেষ্টা করেছি তবে কোনও ফল হয়নি।

আমি যা করেছি তা আপনার দিনটি বাঁচাতে পারে Here

এইচটিএমএলে আপনার স্ক্রিপ্ট ট্যাগের মধ্যে একটি ভেরিয়েবল ঘোষণা করুন।

ভালো লেগেছে:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

একবার আপনি নীচে কৌণিক পরিষেবা ব্যবহার করে এটি করেছেন।

$ জানালা

এখন নীচে একই নিয়ামক স্কোপ থেকে কল করা গেটডাটা ফাংশন আপনাকে যে মানটি চাইবে তা দিবে।

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

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

— খাজা অসীম
সূত্র

3

আমি এই ছোট প্লাগইনটি jQuery এর জন্য লিখেছি যা .val(value)উপস্থিত থাকলে কৌণিক উপাদানটি আপডেট করার জন্য সমস্ত কল করবে will

(function($, ng) {
  'use strict';

  var $val = $.fn.val; // save original jQuery function

  // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }

    // get result of original function
    var result = $val.call(this, value);

    // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');

    // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

এই স্ক্রিপ্টটি কেবল jQuery এবং কৌণিক.জেএস পরে পপ করুন এবং val(value)আপডেটগুলি এখন দুর্দান্ত খেলতে হবে।

সংক্ষিপ্ত সংস্করণ:

!function(n,t){"use strict";var r=n.fn.val;n.fn.val=function(n){if(!arguments.length)return r.call(this);var e=r.call(this,n);return t.element(this[0]).triggerHandler("input"),e}}(window.jQuery,window.angular);

উদাহরণ:

কোড স্নিপেট দেখান

// the function
(function($, ng) {
  'use strict';
  
  var $val = $.fn.val;
  
  $.fn.val = function (value) {
    if (!arguments.length) {
      return $val.call(this);
    }
    
    var result = $val.call(this, value);
    
    ng.element(this[0]).triggerHandler('input');
    
    return result;
    
  }
})(window.jQuery, window.angular);

(function(ng){ 
  ng.module('example', [])
    .controller('ExampleController', function($scope) {
      $scope.output = "output";
      
      $scope.change = function() {
        $scope.output = "" + $scope.input;
      }
    });
})(window.angular);

(function($){  
  $(function() {
    var button = $('#button');
  
    if (button.length)
      console.log('hello, button');
    
    button.click(function() {
      var input = $('#input');
      
      var value = parseInt(input.val());
      value = isNaN(value) ? 0 : value;
      
      input.val(value + 1);
    });
  });
})(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="example" ng-controller="ExampleController">
  <input type="number" id="input" ng-model="input" ng-change="change()" />
  <span>{{output}}</span>
  <button id="button">+</button>
</div>

স্নিপেট প্রসারিত করুন

— dav_i
সূত্র

এটি খনন করার জন্য দুঃখিত, তবে চেকবক্সের সাথে এটি কীভাবে কাজ করতে পারে বা those ওভালের পরিবর্তে p ব্যবহারগুলি বেছে নেয় সে সম্পর্কে কোনও ধারণা কী? এটি ইনপুটটির জন্য নিখুঁতভাবে কাজ করছে val খুব কম সময়ে পরিবর্তনগুলি তাই আপনাকে ধন্যবাদ!

— অস্টিন

@ অস্টিন আমি ভীত আমি জানি না। এটি দুটি প্রযুক্তি সম্পর্কে 5 বছরের পুরানো একটি প্রশ্ন যা সর্বজনীনভাবে পুরানো হিসাবে বিবেচিত হয়, যেমন আমি জ্ঞানটি আমার মাথায় রাখি না। আপনার প্রয়োজন মতো সমাধানটি পাওয়ার জন্য শুভকামনা।

— dav_i

2

আপনি যদি আইই ব্যবহার করছেন তবে আপনাকে ব্যবহার করতে হবে: ইনপুট.ট্রিগার ("পরিবর্তন");

— উইলিয়াম
সূত্র

2

.change()মান নির্ধারণের পরে যুক্ত করুন ।

উদাহরণ:('id').val.('value').change();

এইচটিএমএল এ যুক্ত onchangeবা ng-changeট্যাগ করতে ভুলবেন না

— Azeez
সূত্র

0

আমি ভ্যানিলা / জিকুয়েরির সাথে বাইরে থেকে এনজিএমডেলের মান আপডেট করতে সক্ষম হয়ে এটি করেছি:

function getScope(fieldElement) {
    var $scope = angular.element(fieldElement).scope();
    var nameScope;
    var name = fieldElement.getAttribute('name');
    if($scope) {
        if($scope.form) {
            nameScope = $scope.form[name];
        } else if($scope[name]) {
            nameScope = $scope[name];
        }
    }
    return nameScope;
}

function setScopeValue(fieldElement, newValue) {
    var $scope = getScope(fieldElement);
    if($scope) {
        $scope.$setViewValue(newValue);
        $scope.$validate();
        $scope.$render();
    }
}

setScopeValue(document.getElementById("fieldId"), "new value");

— anlijudavid
সূত্র