我用 AngularJS
制作分页列表图像。 NG-点击
不工作时,我用它在<李>
标签,甚至在< A>在它
标记。但是,它的正常工作在<按钮方式>
标签
I'm making a pagination list image using AngularJS
. ng-click
doesn't work when I use it in <li>
tag or even on <a>
tag in it. But it's working fine in <button>
tag.
<div ng-controller="sampleCtrl" ng-app="myApp" data-ng-init="currentpage=1">
<h2>{{currentpage}}</h2>
<ul>
<li data-ng-repeat="image in images[currentpage-1]">
<img src='{{ image.img }}' width="150px" height="88px"/>
</li>
</ul>
<ul class="pagination">
<li data-ng-repeat="i in [1,2,3,4,5]" title="Page {{i}}">
<a href="#" data-ng-click="currentpage = currentpage + 1">{{i}}</a>
</li>
</ul>
<button data-ng-click="currentpage = currentpage + 1">Click me!</button>
</div>
任何人都知道出了什么问题?
Anyone knows what's the problem?
顺便说一句,我试过这个答案,但它不工作。
BTW, I tried this answer, but it's not working.
推荐答案
这是因为 NG-重复
为每个重复元素的新范围。而当你在做当前页=当前页+ 1
,你最有可能创造一个子域内的新变量。
It's because ng-repeat
creates a new scope for each repeated element. And when you're doing currentpage = currentpage + 1
, you're most probably creating a new variable inside a child scope.
检查范围。这些解决方案通常是简单的东西如 $ parent.currentpage = $ parent.currentpage + 1
(解决当前页
在父作用域变量中, sampleCtrl
范围内),如果你不希望重写了整个事情。
Check your scopes. The solutions is usually something as simple as $parent.currentpage = $parent.currentpage + 1
(to address the currentpage
variable in the parent scope, the sampleCtrl
scope) if you don't want to rewrite the whole thing.
另一个解决方案是创建一个函数,增加了页码,这样你就不会创建任何新的子范围变量,但会继承来自控制器的增加功能:
Another solution would be creating a function to increase the page number, that way you won't be creating any new child scope variables, but would inherit the increase function from the controller:
<a href="#" data-ng-click="increasePage()">{{i}}</a>
和在你的控制器是这样的:
And in your controller something like this:
$scope.increasePage = function() {
currentpage++;
}
相关推荐
最新文章