请找到plunker code
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.levels = [{LevelId:0,LevelName: "Level 1"}, {LevelId:1,LevelName: "Level 2" }];
$scope.updateLevel = function() {
console.log("Fired on change");
$scope.result="Data Changed";
}
});
的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label for="textbox3">Select Level</label>
<select id="LevelSelect" class="form-control" ng-Change="updateLevel()" ng-model="selectedLevel" ng-options="lvl as level.LevelName for level in levels"></select>
<p>{{result}}</p>
</body>
</html>
我提到了各种SO问题,例如on not calling the declared method和onchange not working。建议。
答案 0 :(得分:3)
您使用ng-options
的方式不正确,因为呈现的选项值为undefined:undefined
获取所有选项,请检查下方图片,当您更改所选项目时,不会触发ng-change
事件,因为所有值都相同。
所以改成它,
ng-options="level as level.LevelName for level in levels"
请参阅此角度DOC