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.
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.
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
Try remove []
var app = angular.module('app');
app.controller('controller', function ($scope) {
$scope.Array = [
{name: "one"},
{name: "two"},
{name: "three"},
{name: "four"},
];
$scope.clickOptionFun = function (index) {
console.log(index);
}
});
probably you should use ng-change instead of ng-click, ng-options to fill the options
<select name="xxx" ng-options="item as item.name for item in Array"
ng-change="clickOptionFun(item)">
</select>
First of all there is no clic event for select,you can use ng-change and ng-model
<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-change="clickOptionFun(item)">{{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 (name) {
console.log(name);
}
}])
</script>
You can also use option instead of ng-repeat
You can use ng-change event for <select>. There is no click event for .