এনজি-বিকল্প পরিবর্তন করা হলে মান পান

Question

আমার .html পৃষ্ঠায় একটি ড্রপডাউন তালিকা রয়েছে,

ড্রপডাউন:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
    <option value="">Select Account</option>
</select>

যখন ব্যবহারকারী কোনও মান নির্বাচন করে আমি কোনও ক্রিয়া সম্পাদন করতে চাই। সুতরাং আমার নিয়ামকটিতে আমি করেছি:

নিয়ন্ত্রক:

$scope.$watch('blisterPackTemplateSelected', function() {
    alert('changed');
    console.log($scope.blisterPackTemplateSelected);
});

তবে ড্রপডাউনলিস্টে মান পরিবর্তন করা কোডটি ট্রিগার করে না: $scope.$watch('blisterPackTemplateSelected', function()

ফলস্বরূপ আমি একটি সাথে আরও একটি পদ্ধতি চেষ্টা করেছিলাম: ng_change = 'changedValue()'নির্বাচিত ট্যাগে

এবং

ফাংশন:

$scope.changedValue = function() {
   console.log($scope.blisterPackTemplateSelected);
}

তবে এটি blisterPackTemplateSelectedএকটি শিশু সুযোগে সঞ্চিত। আমি পড়েছি পিতামাতারা সন্তানের সুযোগ অ্যাক্সেস পেতে পারে না।

যখন ড্রপডাউন তালিকার একটি নির্বাচিত মান পরিবর্তন হয় তখন কোনও কিছু কার্যকর করার সঠিক / সর্বোত্তম উপায় কী? যদি এটি পদ্ধতি 1, আমি আমার কোডটি দিয়ে কী ভুল করছি?

Answer 1

আরটিম যেমন বলেছিল আপনাকে এনজিচঞ্জ ব্যবহার করতে হবে এবং আপনার এনজিচঞ্জ ফাংশনের পক্ষে যুক্তি হিসাবে এনজিমোডেল অবজেক্টটি পাস করতে হবে

উদাহরণ :

<div ng-app="App" >
  <div ng-controller="ctrl">
    <select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
            data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
      <option value="">Select Account</option>
    </select>
    {{itemList}}     
  </div>       
</div>

JS:

function ctrl($scope) {
  $scope.itemList = [];
  $scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];

  $scope.changedValue = function(item) {
    $scope.itemList.push(item.name);
  }       
}

সরাসরি উদাহরণ: http://jsfiddle.net/choroshin/9w5XT/4/

Comments

হাই, দুর্দান্ত উত্তর। আইটেমের পুরো সারি বিশদ হিসাবে বিকল্পের মান সেট করা আছে। আমি কীভাবে এটি আইডি সেট করতে পারি?

— অ্যামিলিন

হাই @ অ্যালেক্স চোরোশিন আমার একই ধরণের সমস্যা আছে তবে আমি যখন ডেটাবেস থেকে ডেটা সংগ্রহ করি তখন ডেটাবেস থেকে ডেটা পাচ্ছি কীভাবে সেই ডেভিডটি ডিভিতে দেখাব? আমি এটি কন্ট্রোলারের ফাংশনটিতে চেষ্টা করি $ স্কোপ.একাউন্টডেটাইল্ডাটা = ডেটা.ডাটা; এবং ভিউগুলিতে আমি এই কোডটি try {অ্যাকাউন্টডেটাইল্ডাটা। ভারসাম্য try try চেষ্টা করে দেখি তবে ডেটাবেস থেকে প্রাপ্ত ডেটা হিসাবে সেখানে দেখানো হয়নি এবং আমি কনসোলে সেই ডেটা দেখতে পারি

— নাদিম ইজাজ

Answer 2

আমি এই জন্য দেরী হতে পারে তবে আমার কিছুটা একই সমস্যা ছিল।

আমার আইডি এবং নাম দুটিই আমার মডেলটিতে পাস করতে হবে তবে সমস্ত গোঁড়া সমাধানগুলি আমাকে নিয়ন্ত্রণটি নিয়ন্ত্রণ করতে কোডটি পরিবর্তন করতে হয়েছিল।

আমি একটি ফিল্টার ব্যবহার করে এটি থেকে বেরিয়ে আসার উপায়টি ম্যাকগিভেভার করেছি।

<select 
        ng-model="selected_id" 
        ng-options="o.id as o.name for o in options" 
        ng-change="selected_name=(options|filter:{id:selected_id})[0].name">
</select>
<script>
  angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
    $scope.options = [
      {id:1, name:'Starbuck'},
      {id:2, name:'Appolo'},
      {id:3, name:'Saul Tigh'},
      {id:4, name:'Adama'}
    ]
  }])
</script>

"কৌশল" এখানে:

ng-change="selected_name=(options|filter:{id:selected_id})[0].name"

আমি আইডিটির সঠিক নামটি পুনরুদ্ধার করতে অন্তর্নির্মিত ফিল্টারটি ব্যবহার করছি

এখানে একটি ওয়ার্কিং ডেমো সহ একটি প্লঙ্কার ।

Answer 3

দয়া করে এটির ngChangeনির্দেশিকাটি ব্যবহার করুন । উদাহরণ স্বরূপ:

<select ng-model="blisterPackTemplateSelected" 
        ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
        ng-change="changeValue(blisterPackTemplateSelected)"/>

এবং প্যারামিটার হিসাবে আপনার নতুন মডেলের মানটি নিয়ামক হিসাবে পাস করুন:

ng-change="changeValue(blisterPackTemplateSelected)"

Answer 4

সেরা অনুশীলন হ'ল একটি অবজেক্ট তৈরি করা (সর্বদা এনজি-মডেলটিতে একটি ব্যবহার করুন) create

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

var myObj: {
     ngModelValue: null
};

এবং আপনার টেমপ্লেটে:

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options">
</select>

এখন আপনি দেখতে পারেন

myObj.ngModelValue

অথবা আপনি এনজি-চেঞ্জের নির্দেশিকাটি এর মতো ব্যবহার করতে পারেন:

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"
    ng-change="myChangeCallback()">
</select>

ডিম্বাণু.আইডিও ভিডিও "দ্য ডট" এর সত্যই একটি ভাল ওভারভিউ রয়েছে, যেমন এটি খুব জনপ্রিয় স্ট্যাক ওভারফ্লো প্রশ্ন: অ্যাংুলারজেএস-এ স্কোপ প্রোটোটাইপাল / প্রোটোটাইপিকাল উত্তরাধিকারের সংক্ষিপ্ততাগুলি কী কী?

Answer 5

আপনি পরামিতি হিসাবে এনজি-পরিবর্তন ফাংশনের মাধ্যমে এনজি-মডেল মানটি পাস করতে পারেন:

<select 
  ng-model="blisterPackTemplateSelected" 
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
  ng-change="changedValue(blisterPackTemplateSelected)">
    <option value="">Select Account</option>
</select>

আপনার দৃশ্য না দেখে আপনার পরিস্থিতি জানা কিছুটা কঠিন তবে এটি কাজ করা উচিত।

Answer 6

আপনি এরকম কিছু করতে পারেন

<html ng-app="App" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>
angular.module("App",[])
  .controller("ctrl",['$scope',function($scope){

    $scope.changedValue = function(item){       
    alert(item);
  }
  }]);
</script>
<div >
<div ng-controller="ctrl">
    <select  ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" >
    <option value="">Select Account</option>
    <option value="Add">Add</option>
</select>
</div>
</div>
</html>

বিকল্প যুক্ত করার পরিবর্তে আপনার ডাটা-এনজি-অপশনগুলি ব্যবহার করা উচিত I আমি পরীক্ষার উদ্দেশ্যে অ্যাড বিকল্পটি ব্যবহার করেছি

Answer 7

আমি এখানে দেরি করেছি তবে আমি একই ধরণের সমস্যাটি সমাধান করেছি যা সহজ এবং সহজ।

<select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)">
<option value="">Select Account</option>
<option ng-repeat="blisterPacks in blisterPackTemplates" value="{{blisterPacks.id}}">{{blisterPacks.name}}</option>

এবং এনজি-চেঞ্জের জন্য ফাংশনটি নীচে রয়েছে;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

Answer 8

আপনি ফিল্টার ব্যবহার করে তালিকা / অ্যারে থেকে নির্বাচিত বিকল্পের মান এবং পাঠ্য পাবেন।
editobj.FlagName = (EmployeeStatus | ফিল্টার: {মান: editobj.Flag}) [0] .KeyName

<select name="statusSelect"
      id="statusSelect"
      class="form-control"
      ng-model="editobj.Flag"
      ng-options="option.Value as option.KeyName for option in EmployeeStatus"
      ng-change="editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName">
</select>

Answer 9

আমি একই সমস্যা ছিল এবং একটি অনন্য সমাধান খুঁজে পেয়েছি। এটি সর্বোত্তম অনুশীলন নয়, তবে এটি কারও পক্ষে সহজ / সহায়ক প্রমাণিত হতে পারে। আইডি বা ক্লাসে বা আপনার নির্বাচিত ট্যাগটিতে কেবল jquery ব্যবহার করুন এবং তারপরে পরিবর্তন ফাংশনে আপনার পাঠ্য এবং মান উভয়ই অ্যাক্সেস রয়েছে। আমার ক্ষেত্রে আমি পাল / ইজেএসের মাধ্যমে বিকল্প মানগুলি পাস করছি:

    <select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)">
      <% _.each(projects, function(project) { %>
        <option value="<%= project.id %>"><%= project.title %></option>
        <% }) %>
    </select>

তারপরে আমার কৌণিক নিয়ামকটিতে আমার এনজি-চেঞ্জ ফাংশনটি দেখতে এই রকম দেখাচ্ছে:

    $scope.projectChange = function($scope) {
         $scope.project.title=$("#projectSelector option:selected").text();
     };

Answer 10

আমি কিছু সমাধান চেষ্টা করেছি, তবে এখানে বেসিক প্রোডাকশন স্নিপেট। দয়া করে এই স্নিপেটের গুণমানের আশ্বাসের সময় কনসোল আউটপুটটিতে মনোযোগ দিন।

মার্কআপ :

<!DOCTYPE html>
<html ng-app="appUp">
<head>
<title>
  Angular Select snippet
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

</head>


<body ng-controller="upController">

<div  class="container">

 <div class="row">
 <div class="col-md-4">

 </div> 
 <div class="col-md-3">
    <div class="form-group">
    <select name="slct" id="slct" class="form-control" ng-model="selBrand" ng-change="Changer(selBrand)" ng-options="brand as brand.name for brand in stock">
    <option value="">
        Select Brand
    </option>
    </select>
    </div>

    <div class="form-group">
    <input type="hidden" name="delimiter" value=":" ng-model="delimiter" />
    <input type="hidden" name="currency" value="$" ng-model="currency" />
    <span>
     {{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}
    </span>
    </div>

 </div> 
 <div class="col-md-4">

 </div>
 </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>

কোড:

var c = console;

var d = document;


 var app = angular.module('appUp',[]).controller('upController',function($scope){

    $scope.stock = [{
     name:"Adidas",
     price:420      
    },
    {
     name:"Nike",
     price:327      
    },
    {
     name:"Clark",
     price:725      
    }
    ];//data 



    $scope.Changer = function(){
     if($scope.selBrand){ 
     c.log("brand:"+$scope.selBrand.name+",price:"+$scope.selBrand.price);
     $scope.currency = "$";
     $scope.delimiter = ":";
     }
     else{

        $scope.currency = "";
        $scope.delimiter = "";
        c.clear();
     }
    }; // onchange handler

 });

ব্যাখ্যা: এখানে গুরুত্বপূর্ণ বিষয়টি হ'ল পরিবর্তিত মানের নাল চেক করা, অর্থাত্ যদি মানটি 'অপরিজ্ঞাত' বা 'নাল' হয় তবে আমাদের এই পরিস্থিতিটি পরিচালনা করতে হবে।