รับค่าเมื่อเลือก ng-option เปลี่ยนแปลง

ฉันมีรายการแบบเลื่อนลงในหน้า. 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()

ด้วยเหตุนี้ฉันจึงลองใช้วิธีอื่นโดยใช้ a: ng_change = 'changedValue()'บนแท็กเลือก

และ

ฟังก์ชั่น:

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

แต่blisterPackTemplateSelectedจะถูกเก็บไว้ในขอบเขตลูก ฉันอ่านว่าผู้ปกครองไม่สามารถเข้าถึงขอบเขตย่อยได้

อะไรคือวิธีที่ถูกต้อง / ดีที่สุดในการดำเนินการบางอย่างเมื่อค่าที่เลือกในรายการแบบเลื่อนลงเปลี่ยนไป ถ้าเป็นวิธีที่ 1 ฉันทำอะไรผิดกับรหัสของฉัน?

ตามที่ 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="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"

ฉันใช้ตัวกรองในตัวเพื่อดึงชื่อที่ถูกต้องสำหรับ id

นี่คือผู้สนับสนุนที่มีการสาธิตที่ใช้งานได้

กรุณาใช้สำหรับngChangeคำสั่ง ตัวอย่างเช่น:

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

และส่งค่าโมเดลใหม่ของคุณในคอนโทรลเลอร์เป็นพารามิเตอร์:

ng-change="changeValue(blisterPackTemplateSelected)"

แนวทางปฏิบัติที่ดีที่สุดคือการสร้างวัตถุ (ใช้ a. ใน ng-model เสมอ)

ในตัวควบคุมของคุณ:

var myObj: {
     ngModelValue: null
};

และในเทมเพลตของคุณ:

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

ตอนนี้คุณสามารถดู

myObj.ngModelValue

หรือคุณสามารถใช้คำสั่ง ng-change ดังนี้:

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

วิดีโอ egghead.io "The Dot"มีภาพรวมที่ดีมากเช่นเดียวกับคำถามล้นสแต็กที่เป็นที่นิยมมาก: ความแตกต่างของการสืบทอดต้นแบบขอบเขต / ต้นแบบใน AngularJS คืออะไร

คุณสามารถส่งค่า ng-model ผ่านฟังก์ชัน ng-change เป็นพารามิเตอร์:

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

เป็นเรื่องยากเล็กน้อยที่จะรู้สถานการณ์ของคุณโดยไม่ต้องมองเห็น แต่สิ่งนี้ควรได้ผล

คุณสามารถทำสิ่งนี้ได้

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

แทนที่จะเพิ่มตัวเลือกคุณควรใช้ data-ng-options ฉันใช้ตัวเลือกเพิ่มเพื่อการทดสอบ

ฉันมาสายที่นี่ แต่ฉันแก้ไขปัญหาประเภทเดียวกันด้วยวิธีนี้ที่ง่ายและสะดวก

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

และฟังก์ชั่นสำหรับ ng-change มีดังนี้

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

คุณจะได้รับค่าและข้อความของตัวเลือกที่เลือกจากรายการ / อาร์เรย์โดยใช้ตัวกรอง
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>

ฉันมีปัญหาเดียวกันและพบวิธีแก้ปัญหาเฉพาะ นี่ไม่ใช่แนวทางปฏิบัติที่ดีที่สุด แต่อาจพิสูจน์ได้ว่าง่าย / มีประโยชน์สำหรับใครบางคน เพียงใช้ jquery บน id หรือ class หรือแท็กที่คุณเลือกจากนั้นคุณจะสามารถเข้าถึงทั้งข้อความและค่าในฟังก์ชันการเปลี่ยนแปลง ในกรณีของฉันฉันส่งผ่านค่าตัวเลือกผ่านใบเรือ / ejs:

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

จากนั้นในตัวควบคุมเชิงมุมของฉันฟังก์ชัน ng-change ของฉันจะมีลักษณะดังนี้:

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

ฉันได้ลองใช้วิธีแก้ปัญหาบางอย่างแล้ว แต่นี่คือตัวอย่างข้อมูลการผลิตพื้นฐาน โปรดใส่ใจกับเอาต์พุตคอนโซลในระหว่างการประกันคุณภาพของตัวอย่างข้อมูลนี้

มาร์กอัป:

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

 });

คำอธิบาย: จุดสำคัญที่นี่คือการตรวจสอบค่าว่างของค่าที่เปลี่ยนแปลงกล่าวคือถ้าค่าเป็น 'ไม่ได้กำหนด' หรือ 'ว่าง' เราควรจัดการกับสถานการณ์นี้