ng-click not working on li
Question
I find this very bizzare, ng-click is not working on this element,
<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>
And this as the function,
$scope.selectCategory = function(d){
console.log(d);
}
This there is no event triggered, I need help with this.
3 answers
solution1
2 ACCPTED 2017-08-02 09:19:45
I suspect that by using ng-blur and ng-focus your click function is not getting registered because the div is getting hidden before you click on the list. My suggestion is to not use ng-blur and ng-focus but rather ng-click on the input.
Working fiddle: http://jsfiddle.net/ADukg/13591/
solution2
0 2017-08-02 08:58:36
I suspect the problem is that the ".autocomplete-c" div is hidden before the ng-click event could be triggered, so a few changes seem to fix it.
<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>
with the controller looking like this
$scope.selectCategory = function(d){
console.log(d);
$scope.valued = "is-focused";
$scope.categorySelected = d.name+", "+d.types;
$scope.categoryID = d.categoryID;
$scope.autocomplete = false;
}
solution3
0 2017-08-02 08:59:26
Using the below code, this is working as expected ( Working Plnkr ). Perhaps having something outlined like this will help.
With the provided code, it is unclear about how your environment is set up. Assuming no errors (you are looking in the console), I think you may have a scoping issue in which selectCategory() does not exist.
A quick check could be simply interpolating a primitive value such as setting $scope.whereami = "SomeController";
Then, at the same level of where you are trying to call selectCategory() within your ng-repeat, add {{ whereami }} .
I posted on an issue that I may also be affecting you, which is the fact that ng-repeat creates it's own child scopes. Depending on what you have going on, that could also come into play: 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.