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

时间:2017-09-05 07:46:43

标签: html angularjs twitter-bootstrap angularjs-directive

实际上我在网页中使用分页,我正在设置一个条件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>

在上面的代码中我使用了ng-show =“totalOrphans!== 0”用于ng-show我的分页工作正常我点击下一个按钮突出显示其他单词。我想要结果。

但是如果我使用ng-if而不是ng-show我的分页不起作用,那么当我点击下一个单词时它不突出显示下一个单词。

这里我附上了我的网页图片。

enter image description here

如果有人仍然不理解我的问题,请在这里发表评论,我会提前澄清你,

1 个答案:

答案 0 :(得分:0)

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;
}]);

现在您可以使用HTML中的id:

<div ng-controller="AppCtrl as vm">
    <span>{{vm.id}}</span>
</div>

例如,您提供的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>