javascript 将 ng-click 处理程序添加到 angularjs 中的重复元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18115305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding ng-click handler to repeated element in angularjs
提问by Errol Fitzgerald
Im using angularjs 1.0.7 and trying to add a ng-click handler to a list element which is repeated using ng-repeat, but the function does not fire. Below is the html, along with variations I have tried in comments. I have tried adding the same ng-click function on a different element and it works fine.
我使用 angularjs 1.0.7 并尝试将 ng-click 处理程序添加到使用 ng-repeat 重复的列表元素,但该函数不会触发。下面是 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>
And here is the controller
这是控制器
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);
};
});
采纳答案by George Yates
You have an error in your markup, your function in the controller is called getPlayList
and in your markup its getPlaylist
. Note the capitalization on the l
. Here's a fiddle where it's fixed and there's no problem:
http://jsfiddle.net/GYatesIII/z7mpW/3/
你的标记有错误,你在控制器中的函数被调用getPlayList
,在你的标记中它的getPlaylist
. 请注意l
. 这是一个固定的小提琴,没有问题:http:
//jsfiddle.net/GYatesIII/z7mpW/3/