angularjs - নির্বাচিত এনজি-বিকল্প পরিবর্তন যখন মান পান




angularjs-scope (7)

Artyom হিসাবে আপনি ngChange ব্যবহার এবং ngModel বস্তু আপনার ngChange ফাংশন যুক্তি হিসাবে পাস করতে হবে বলে

উদাহরণ :

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

আমি আমার। এইচটিএমএল পাতা একটি ড্রপডাউন তালিকা আছে।

ড্রপডাউন:

<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()' দিয়ে চেষ্টা করেছি: ng_change = 'changedValue()' নির্বাচন ট্যাগে

এবং

ফাংশন:

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

কিন্তু blisterPackTemplateSelected করা একটি সন্তানের সুযোগে সংরক্ষণ করা হয়। আমি পিতা বা মাতা সন্তানের সুযোগ অ্যাক্সেস পেতে পারি না পড়া।

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


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

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

এটা দেখে না আপনার দৃশ্যকল্প জানার জন্য একটু কঠিন, কিন্তু এটি কাজ করা উচিত।


আপনি ফিল্টার ব্যবহার করে তালিকা / অ্যারে থেকে নির্বাচিত বিকল্পের মান এবং পাঠ্য পাবেন।
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>

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

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

আমি একটি ফিল্টার ব্যবহার করে এটি আমার উপায় macgyvered।

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

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

এখানে একটি কাজ ডেমো সঙ্গে একটি plunkr


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

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

    };

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

মার্কআপ :

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

 });

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


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

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

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>

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







angularjs-scope