向angularjs中的重复元素添加ng点击处理程序

Adding ng-click handler to repeated element in angularjs

本文关键字:ng 处理 程序 添加 元素 angularjs      更新时间:2023-09-26

Im使用angularjs 1.0.7,并试图将ng点击处理程序添加到使用ng重复的列表元素中,但该函数没有启动。下面是html,以及我在评论中尝试过的变体。我尝试在不同的元素上添加相同的ng-click函数,效果很好。

<div class="results" ng-cloak ng-show="showList != 0">
    <ul>
        <li ng-repeat="movie in movies" ng-click="getPlaylist(movie.id)">{{ movie.title }}</li>
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist({{movie.id}})">{{ movie.title }}</li>-->
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist('movie.id')">{{ movie.title }}</li>-->
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist(''{{movie.id}}'')">{{ movie.title }}</li>-->
    </ul>
</div>

这是控制器

main.controller('MoviesListCtrl', function($scope, $http, playlist) {
    $scope.movies = [];
    $scope.showList = false;

    $scope.getMoviesList = function (val) {
        var link = 'titles?q=' + val + '&limit=10'
        $http.get(link).success(function (data) {
            // now we have all our movies and can add them
            $scope.movies = data;
            // if there any movies we can show the list
            if ($scope.movies.length > 0) {
                $scope.showList = true;
            } else {
                $scope.showList = false;
            }
        });
    };
    $scope.getPlayList = function (id) {
        alert(id);
    };
});

标记中有错误,控制器中的函数称为getPlayList,标记中的函数为getPlaylist。注意l上的大写。这是一把固定的小提琴,没有问题:http://jsfiddle.net/GYatesIII/z7mpW/3/