誰かが私のAngularJsコードで混乱していますか？

Question

実際に私はウェブページでページングを使用していますが、このコードが真であれば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-ショー=「totalOrphans！== 0」のためのそのほかの強調し、私は次のボタンをクリックしていたときに私の改ページが正常に動作しているngが、表示さwords.thats私は結果が欲しい。

ng-showの代わりにng-ifを使用した場合、私のページネーションは機能しません。次の単語を強調表示しません。

ここに私のウェブページの画像を添付しています。

誰かがまだ私の質問を理解していない場合、ここでコメントしてください、私は

Answer 1

ng-ifは、それ自身のスコープを作成します、あなたに事前に感謝を明確にしようとします。また、uibページネーションは独自のスコープを作成し、おそらく親スコープを使用してページネーションを作成します。今ではng-ifに独自のスコープがある場合、uib-paginationはコントローラのスコープパラメータを使用できません。 このため、ControllerAs構文があります。 これを使用するには、ng-controllerで定義する必要があります：ng-controller="AppCtrl as vm"。 あなたのコントローラ内部のあなたは「この」で「VM」を定義する必要があります：あなたのコードは、そのng-ifで例として

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

：

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

今、あなたは、このようにHTML内のIDを使用することができます

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