有人可以帮助我，我在AngularJs代码中感到困惑

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. Here is my code..

实际上我在网页中使用分页，我正在设置一个条件ng-if =“id！== 0”如果此代码为真，那么它将隐藏一些部分，如果它的错误显示该部分。我的问题是如果条件是是的，然后它显示该部分但分页不起作用当我点击下一个它不会去单词。但如果我在ng-show使用相同的条件它的工作精细分页也工作。请帮助我什么进行我无法理解。这是我的代码..

<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.thats我想要结果。

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我的分页不起作用，当我点击下一个时它不突出显示下一个单词。

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,

如果有人还不明白我的问题，请在这里发表评论，我会提前澄清你，

1 个解决方案

#1

ng-if will create it's own scope. Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller. For this reason there is the ControllerAs Syntax. To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm". Inside your controller you need to define 'vm' with 'this':

ng-if将创建自己的范围。此外，uib-pagination还会创建自己的范围，并可能使用其父作用域来创建您的分页。现在，如果ng-if有自己的范围，则uib-pagination不能使用来自控制器的范围参数。因此，存在ControllerAs语法。要使用它，您需要在ng-controller中定义它，如：ng-controller =“AppCtrl as vm”。在控制器内部，您需要使用'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代码 - 如果您提供的代码需要如下所示：

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

#1

app.controller('AppCtrl', [function() {
    var vm = this
    vm.id = 5;
}]);