[angularjs] चयनित एनजी-विकल्प परिवर्तन करते समय मूल्य प्राप्त करें



Answers

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

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

मैंने फ़िल्टर का उपयोग करके इसे बाहर निकाला।

<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

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 का blisterPackTemplateSelected एक बच्चे के दायरे में रखा जाता है। मैंने पढ़ा है कि माता-पिता को बच्चे के दायरे तक पहुंच नहीं मिल सकती है।

ड्रॉपडाउन सूची में चयनित मान में परिवर्तन होने पर कुछ निष्पादित करने का सही / सर्वोत्तम तरीका क्या होता है? यदि यह विधि 1 है, तो मैं अपने कोड के साथ क्या गलत कर रहा हूं?




मैंने कुछ समाधानों का प्रयास किया है, लेकिन यहां मूल उत्पादन स्निपेट है। कृपया, इस स्निपेट की गुणवत्ता आश्वासन के दौरान कंसोल आउटपुट पर ध्यान दें।

मार्क अप करें:

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

 });

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




फ़िल्टर का उपयोग करके आपको विकल्प / मूल्य से चयनित विकल्प का मूल्य और टेक्स्ट मिलेगा।
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>



आप ऐसा कुछ कर सकते हैं

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

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




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

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

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>

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






Related