ng-click 不适用于 li

Question

我觉得这很奇怪，ng-click 在这个元素上不起作用，

<div class="row">
    <div class="col-md-12">
        <div class="form-group label-floating is-empty">
             <label class="control-label">category</label>
                 <input type="text" class="form-control" onkeydown="return false;" ng-focus="autocomplete != autocomplete" ng-blur="autocomplete != autocomplete">
                 <div class="autocomplete-c" ng-show="autocomplete">
                     <ul>
                         <li ng-repeat="d in categories" ng-click="selectCategory(d)">
                             <p>{{d.name}}</p>
                             <small>{{d.types}}</small>
                         </li>
                     </ul>
                </div>
                <span class="material-input"></span>
            </div>
        </div>
    </div>

并将此作为函数，

$scope.selectCategory = function(d){
    console.log(d);
}

没有事件触发，我需要帮助。

Answer 1

我怀疑问题是“.autocomplete-c”div 在 ng-click 事件被触发之前被隐藏了，所以一些更改似乎可以解决它。

<input type="text" class="form-control" onkeydown="return false;" ng-model="categorySelected" ng-focus="autocomplete = true">
    <div class="autocomplete-c" ng-show="autocomplete">
        <ul>
            <li ng-repeat="d in categories" ng-click="selectCategory(d)">
                <p>{{d.name}}</p>
                <small>{{d.types}}</small>
            </li>
        </ul>
    </div>

控制器看起来像这样

$scope.selectCategory = function(d){
    console.log(d);
    $scope.valued = "is-focused";
    $scope.categorySelected = d.name+", "+d.types;
    $scope.categoryID = d.categoryID;
    $scope.autocomplete = false;
}

Answer 2

使用下面的代码，这按预期工作 (Working Plnkr)。也许像这样概述一些事情会有所帮助。

使用提供的代码，不清楚您的环境是如何设置的。假设没有错误（您正在控制台中查看），我认为您可能遇到 selectCategory() 不存在的范围问题。

快速检查可以简单地插入原始值，例如设置 $scope.whereami = "SomeController";

然后，在您尝试在 ng-repeat 中调用 selectCategory() 的同一级别，添加 {{ whereami }}.

我发布了一个我可能也会影响到你的问题，这是 ng-repeat 创建它自己的子范围的事实。根据您的情况，这也可能会起作用：ng-model not updating AngularJS.

应用程序/控制器

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.categories = [
      {'name': 'cat1', 'types': ['A-Type', 'B-Type'] },
      {'name': 'cat2', 'types': ['C-Type', 'D-Type'] }
    ];

  $scope.selected = {};

  $scope.selectCategory = function(d){
      console.log(d);
      $scope.selected = d;
  }

}]);

HTML

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>
  <body>

    <div ng-controller="MainCtrl">

      <ul>
        <li ng-repeat="d in categories" ng-click="selectCategory(d)">
           <p>{{d.name}}</p>
           <small>{{d.types}}</small>
        </li>
      </ul>

      <div>
        <h3>Clicked</h3>  
        Name: {{ selected.name }} <br />
        Type: {{ selected.types }}
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Answer 3

我怀疑通过使用 ng-blur 和 ng-focus 您的点击功能没有被注册，因为 div 在您点击列表之前被隐藏了。我的建议是不要使用 ng-blur 和 ng-focus 而是点击输入。

工作fiddle：http://jsfiddle.net/ADukg/13591/

ng-click 不适用于 li

ng-click not working on li

javascript

angularjs

angularjs-ng-click