CODEWITHSUNDEEP
javascripthtmlangularjs
jiexishede
jiexishede

Reputation: 2613

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.

Upvotes: 3

Views: 6261

Answers (5)

Jigarb1992
Jigarb1992

Reputation: 848

You can use ng-change event for <select>. There is no click event for .

Upvotes: 0

Parshuram Kalvikatte
Parshuram Kalvikatte

Reputation: 1646

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

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222720

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

Upvotes: 2

Abdelrhman Hussien
Abdelrhman Hussien

Reputation: 374

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>

Upvotes: 0

Donald Wu
Donald Wu

Reputation: 716

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);
    }
});

Upvotes: 0

Related Questions