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

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

工作小提琴：http://jsfiddle.net/ADukg/13591/

Answer 2

我怀疑问题是“.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 3

使用以下代码，这可以按预期工作（Working Plnkr）。也许有这样的概述会有所帮助。

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

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

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

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

App / Controller

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>

ng-click不工作li

3 个答案: