AngularJS & lt; select>.选项上的' ng-click '不是工作

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

本文关键字：ng-click 工作 选项 lt select AngularJS      更新时间：2023-09-26

我使用AngularJS。我在选择选项上绑定数据。我在每个选项上绑定了一个点击功能。当我单击该选项时，clickFun不工作。

这是我的代码:

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

我设置了一个断点在clickOptionFun。似乎该函数没有实现。我找不到任何日志信息

对于ng-change，您需要有一个ng-model，您可以像这样传递选中的对象，

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

尝试删除[] 

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

也许你应该使用ng-change而不是ng-click, ng-options来填充选项

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

首先，select没有clic事件，您可以使用ng-change和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>

你也可以用option代替ng-repeat

可以对<select>使用ng-change event。.

没有点击事件
相关文章：