jiexishede jiexishede - 1 month ago 10
HTML Question

AngularJS, <select>. The `ng-click` on the <option> is not work

I use AngularJS. I bind data on the select options. I bind a click function on each option. When I click the option, the

clickFun
does not work.

This is my code:

<style>
.bigDiv {
width: 500px;
height: 500px;
background-color: gray;
margin: 34px auto;
}
</style>


<body ng-app="app" ng-controller="controller">
<div class="bigDiv">
<select name="xxx" id="">
<option ng-repeat="item in Array" value="" ng-click="clickOptionFun($index)">{{item.name}}</option>
</select>
</div>

<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('controller',['$scope', function ($scope) {
$scope.Array = [
{name: "one"},
{name: "two"},
{name: "three"},
{name: "four"},
];

$scope.clickOptionFun = function (index) {
console.log(index);
}
}])
</script>


I set a breakpoint at the clickOptionFun. It seems the funcion does not implement. I can't look any log information.

Answer

You need to have a ng-model for the ng-change, you can pass the selected object like this,

 <select name="xxx" id="" ng-model="selected"
    ng-options="item as item.name for item in Array"
    ng-change="clickOptionFun(selected)">
 </select>

DEMO

Comments