jiexishede jiexishede - 1 year ago 59
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

does not work.

This is my code:

.bigDiv {
width: 500px;
height: 500px;
background-color: gray;
margin: 34px auto;

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

<script src="angular.js"></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) {

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

Answer Source

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"