javascript - Angular js 将选定的对象传递给下拉/选择的更改事件 :

标签 javascript angularjs

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

我正在尝试将下拉列表中选定的项目传递给 Controller ​​中的函数。

但是,我发现它是未定义的。

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>

关于javascript - Angular js 将选定的对象传递给下拉/选择的更改事件 :,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38090888/

相关文章:

javascript - angularJS动态选项卡字段

javascript - 根据单击的按钮将样式应用于单独的元素

javascript - Angular.js 中的 Django 表单集等效项

java - 您可以在 Protractor 规范中运行 Java 代码吗?

javascript - 将 Angular 与 D3 库集成

javascript - Angular UI网格无法对具有行索引的列进行排序

javascript - 从 JSON 中的不同对象获取信息

javascript - 忽略代码和前置标签中的空格

javascript - 我找不到函数名