Angular js将所选对象传递给dropdown/select:的更改事件

Angular js pass selected object to a change event for dropdown/select:

本文关键字：select 事件 dropdown js 对象 Angular      更新时间：2023-09-26

Plunkr:http://plnkr.co/edit/BRQ3I4hFTlgKq4Shz19v?p=preview

我正试图将下拉菜单的选定项传递给控制器中的函数。

然而，我得到它作为未定义的。

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div ng-app="MyApp" ng-controller="MyController">
        <select ng-model="ddlFruits" 
        ng-options="fruit.Id as fruit.Name for fruit in Fruits track by fruit.Id"
            ng-change="GetValue(fruit)">
        </select>
    </div>
  </body>
</html>

脚本:

var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
    $scope.Fruits = [{
        Id: 1,
        Name: 'Apple'
    }, {
        Id: 2,
        Name: 'Mango'
    }, {
        Id: 3,
        Name: 'Orange'
    }];
    $scope.GetValue = function (fruit) {
        alert(fruit);
    }
});

从HTML更改这个

ng-change="GetValue(ddlFruits)"

从控制台，您将获得选定的id 

<select ng-model="ddlFruits" 
        ng-options="fruit.Id as fruit.Name for fruit in Fruits track by fruit.Id"
            ng-change="GetValue(ddlFruits)">
        </select>

这会给你带来水果

HTML 

 <select ng-model="ddlFruits" 
    ng-options="fruit.Id as fruit.Name for fruit in Fruits track by fruit.Id"
        ng-change="GetValue(this)">
    </select>
  $scope.GetValue = function (val) {
    alert(val.Fruits[val.ddlFruits].Name);
  }

，这将给你选择的值

$scope.GetValue = function () {
    alert($scope.ddlFruits);
  }
相关文章：