Angular clickable list

Question

I want to make a clickable list in angular, after clicking on the item, it should fire a function in controller where I want to manipulate the item. The code is:

<h2>User List</h2>
    <ul ng-repeat="item in items">
        <li ng-repeat="(key, val) in item">
            <ul>
                 <li>
                      <div  ng-click="getUserChat(key)">
                          <a>{{key}}</a>
                      </div>
                 </li>
             </ul>
         </li>
     </ul>

in controller:

chatApp.controller('chatController', ['$scope', '$rootScope','$state', '$http' , function($scope, $rootScope, $state, $http) {
$scope.init = function(){
    $http.get("http://127.0.0.1:8000/user_list/").success(function(data) {
        $scope.items = data;
        console.log($scope.items);
    });
};
$scope.getUserChat = function(selectedFriend){
    $rootScope.selectedFriend = selectedFriend;
    console.log($rootScope.selectedFriend);
}
}]);

But the console.log is not showing anything, that is the associated function getUserChat is not called. It's also not showing any error in console.

Can you provide a jsfiddle that demonstrates your issue, since your approach is correct. There should be no issue, like seen in this fiddle: jsfiddle.net/cemozer/nPRRB/2 — Cem Özer
– Cem Özer, Commented Apr 3, 2014 at 13:04

jonhobbs · Accepted Answer · 2014-04-03 12:30:59Z

2

Not sure why you're using (key,value) in your expression, you could just do this...

<li ng-repeat="item as item.name in item">

(assuming you want to display a property of the item called "name" in the template, you may want to display something else).

Then, you just pass the whole item to the function...

<div  ng-click="getUserChat(item)">

So that the function has access to everything.

Also, not sure whether ng-click works on a div, maybe that is why your function isn't being called.

answered Apr 3, 2014 at 12:30

jonhobbs

28.2k39 gold badges119 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular clickable list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related