[英]Can someone help me I am confused in my AngularJs code
Actually I am using pagination in web page,i am putting one condition ng-if="id !== 0" if this code is true then it will hide some portion if its false its showing that portion.My problem is if condition is false then it showing that portion but pagination is not working when i am clicking on next its not going to the word.but if i am using the same condition in ng-show its working fine pagination is also working.Please help me whats going on there i am unable to understand. 其实我在网页上使用分页,我把一个条件ng-if =“ id!== 0”如果此代码为true,那么它将隐藏某些部分,如果其为false则表明该部分。我的问题是条件是否为false然后显示该部分,但是当我单击下一步时,分页不起作用。但是如果我在ng-show中使用相同的条件,则显示其正常的分页也有效。请帮助我怎么办在那里我无法理解。 Here is my code..
这是我的代码。
<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{id}} / {{totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
</div>
in above code i have used ng-show="totalOrphans !== 0" for ng-show my pagination is working fine when i am clicking in next button its highlighting other words.thats i want result. 在上面的代码中,我使用ng-show =“ totalOrphans!== 0”进行ng-show时,我的分页效果很好,当我单击下一步按钮时,它突出显示了其他words。那是我想要的结果。
but if i used ng-if instead of ng-show my pagination is not working,its not highlighting next word when i am clicking on next. 但是,如果我使用ng-if而不是ng-show,则我的分页不起作用,当我单击next时,它不会突出显示下一个单词。
here i am attaching image of my web page. 我在这里附上我网页的图片。
if someone has still not understand my question please comment here ,i will try to clarify you thanks in advance, 如果有人仍然不明白我的问题,请在这里评论,我会尽力向您澄清一下,
ng-if
will create it's own scope. ng-if
将创建自己的范围。 Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. uib-pagination也会创建它自己的范围,并可能使用其父范围来创建您的分页。 Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller.
现在,如果ng-if具有自己的作用域,则uib-pagination不能使用控制器中的作用域参数。 For this reason there is the
ControllerAs
Syntax. 因此,存在
ControllerAs
语法。 To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm"
. 要使用它,您需要在ng-controller中定义它,例如:
ng-controller="AppCtrl as vm"
。 Inside your controller you need to define 'vm' with 'this': 在控制器内部,您需要使用“ this”定义“ vm”:
app.controller('AppCtrl', [function() {
var vm = this
vm.id = 5;
}]);
Now you can use the id inside the HTML like this: 现在,您可以像下面这样在HTML内使用id:
<div ng-controller="AppCtrl as vm">
<span>{{vm.id}}</span>
</div>
As an example your code with ng-if
that you provided need to look like this: 例如,您提供的带有
ng-if
代码如下所示:
<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{vm.id}} / {{vm.totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.