javascript - Angular 可点击列表

Question

我想制作一个可点击的 Angular 列表，点击该项目后，它应该在我想要操作该项目的 Controller 中触发一个功能。代码是:

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

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

但 console.log 没有显示任何内容，即未调用关联函数 getUserChat。它也没有在控制台中显示任何错误。

Answer 1

不确定为什么要在表达式中使用 (key,value)，您可以这样做...

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

(假设您想要在模板中显示名为“name”的项目的属性，您可能想要显示其他内容)。

然后，您只需将整个项目传递给函数...

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

这样函数就可以访问所有内容。

此外，不确定 ng-click 是否适用于 div，也许这就是未调用您的函数的原因。