有人可以帮我我很困惑我的AngularJs代码

其实我在网页中使用分页，我把一个条件ng-if =“id！== 0”如果这段代码是真的，那么它会隐藏一部分如果它的错误显示该部分。我的问题是，如果条件是错误的，那么它显示的部分，但分页不起作用，当我点击下一个它不去这个词。但如果我在ng显示使用相同的条件其工作正常分页也正常工作。请帮助我在那里发生什么，我无法理解。这里是我的代码..有人可以帮我我很困惑我的AngularJs代码

<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-秀=“totalOrphans！== 0”为NG-显示我的分页工作正常，当我在一个按钮点击我的其他突出words.thats我想要的结果。

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

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

，如果有人现在还没有明白我的问题，请在这里评论，我会尽力澄清你在此先感谢，

来源

2017-09-05 Zaif Warm

因为'ng-if'创建子作用域。所以你应该使用'controllerAs'语法来解决这个问题。就像这个'ng-if =“vm.id！== 0”''vm'是'controllerAs'变量。你也应该像这样'var vm = this;'去掉一个变量，然后用'vm' intead '$ scope'。 –

感谢您的回复 –

ng-if将创建它自己的范围。此外，uib分页创建它自己的作用域，并可能使用其父作用域来创建分页。现在，如果ng-if具有它自己的作用域，则uib-pagination不能使用来自您的控制器的作用域参数。由于这个原因，有ControllerAs语法。要使用它，你需要在ng-controller中定义它，如：ng-controller="AppCtrl as vm"。里面你的控制器，你需要定义“虚拟”与“本”：

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

现在你可以使用该ID的HTML里面是这样的：

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

来源

2017-09-05 08:43:04 MrWook

感谢您的回复 –

有人可以帮我我很困惑我的AngularJs代码

回答

相关问题