एनजी-ऑप्शन में बदलाव होने पर मूल्य प्राप्त करें

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

हाय, शानदार जवाब। यहां विकल्प का मूल्य आइटम की पूरी पंक्ति विवरण के रूप में सेट किया गया है। मैं इसे आईडी पर कैसे सेट कर सकता हूं?

— अमीलिन

हाय @ एलेक्स चोरोशिन मुझे एक ही प्रकार की समस्या है लेकिन मुझे डेटाबेस से डेटा मिल रहा है जब मैं डेटाबेस से डेटा इकट्ठा करता हूं तो उस डेटा को डिव में कैसे दिखाएं? मैं नियंत्रक के कार्य $ गुंजाइश में यह कोशिश करता हूं ।accountdetaildata = data.data; और विचारों में, मैं इस कोड को {{accountdetaildata .balance}} की कोशिश करता हूं, लेकिन डेटा वहां नहीं दिखाया गया है क्योंकि डेटाबेस से प्राप्त डेटा और मैं कंसोल में उस डेटा को देख सकता हूं

— नदीम इजाज

Answer 2

मुझे इसके लिए देर हो सकती है लेकिन मेरे पास कुछ था समस्या थी।

मुझे अपने मॉडल में आईडी और नाम दोनों को पारित करने की आवश्यकता थी लेकिन सभी रूढ़िवादी समाधानों ने मुझे परिवर्तन को संभालने के लिए नियंत्रक पर कोड बनाया था।

मैं एक फिल्टर का उपयोग कर इसे से बाहर अपना रास्ता 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"

मैं आईडी के लिए सही नाम प्राप्त करने के लिए अंतर्निहित फ़िल्टर का उपयोग कर रहा हूं

यहां काम करने वाले डेमो के साथ एक प्लंकर है ।

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

सर्वोत्तम अभ्यास एक वस्तु बनाना है (हमेशा एनजी-मॉडल में उपयोग करें)

आपके नियंत्रक में:

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>

Egghead.io वीडियो "द डॉट" में बहुत अच्छा अवलोकन है, जैसा कि यह बहुत लोकप्रिय स्टैक ओवरफ्लो प्रश्न है: AngularJS में स्कोप प्रोटोटाइप / प्रोटोटाइप इनहेरिटेंस की बारीकियां क्या हैं?

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>

ऐड विकल्प के बजाय आपको डेटा-एनजी विकल्पों का उपयोग करना चाहिए। मैंने परीक्षण उद्देश्य के लिए ऐड विकल्प का उपयोग किया है

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

 });

स्पष्टीकरण: यहाँ महत्वपूर्ण बिंदु बदले हुए मूल्य की अशक्त जाँच है, अर्थात यदि मान 'अपरिभाषित' या 'अशक्त' है तो हमें इस स्थिति को संभालना चाहिए।