ブートストラップとangularjsでボタンを表示/非表示にする方法は？

Question

私はいくつかのデータと応答とユーザーに応じて変更するいくつかのボタンが含まれているテーブルがあります。

ここに表があります。私を成し遂げるために必要なもの

<div class="form-group"> 
    <div class="col-lg-12 col-md-9"> 
     <table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100"> 
      <thead style="text-align:center"> 
       <tr> 
        <th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th> 
        <th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th> 
        <th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th> 
        <th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th> 
        <th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created/Joined</th> 
        <th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th> 
       </tr> 
      </thead> 
      <tbody style="text-align:match-parent"> 
       <tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)"> 
        <td style="text-align:center">{{data.Employee.Empid}}</td> 
        <td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td> 
        <td style="text-align:center">{{data.Employee.Email}}</td> 
        <td style="text-align:center">{{data.Department.DeptName}}</td> 
        <td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td> 
        <td style="text-align:center; width:100px"> 
         <div> 
          <button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button> 
          <!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>--> 
          <button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button> 
          <button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <p ng-show="details.length == 0">No Users found.</p> 
     <div class="col-md-8 col-xs-12"> 
      <uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination> 
     </div> 
    </div> 
</div> 

はレスポンスがJSONデータから来るとき、ボタンが変化していることです。今これによる。 data.UserLogin.Status == ''（空） 保留ボタンは、私はこれをdata.UserLogin.Status == 'pending'

達成するにはどうすればよいときdata.UserLogin.Status == 'pending' 再試行]ボタンが表示されるはず際に表示されるはず際

[生成]ボタンが表示されるはずです。ヘルプが歓迎されるよう助けてください。あなたは以下のようにコードを書くことができ

Answer 1

効率的である

<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button> または <button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button> または <button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>

Answer 2

.. APIの成功関数のコードの下

<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button> 

<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button> 

<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button> 

Answer 3

使用。このコードは、レスポンスを取得してDOMが作成された後に実行されます。

$scope.$evalAsync(function(){ 
      $timeout(function() { 
       // Here set the scope variable and it will work in ng-show      
      }, 0); // wait... 
     }); 

注：コントローラーに$ timeoutを追加することを忘れないでください。私たちは、

<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button> <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button> 

利用NG-かのように、NG-NGの場合、ショー、NG-非表示を使用することができます

Answer 4

、それは、あなたが以下のようにng-showng-hideまたはng-ifを使用することができます

Answer 5

ng-showまたはng-hideの代わりにng-ifを実行する必要があります。フラグに基づいてng-showまたはng-hideの場合、コンテンツはDOMにロードされるためです。あなたはブラウザのWebデベロッパーを使ってフラグの値を変更しようとすると、実際のコンテンツを見ることができます。しかし、もしng-ifに行くと、条件が真であるときだけ、実行時にコンテンツが読み込まれます。したがって、より速いパフォーマンスが必要な場合は、ng-showまたはng-hideに行くことができますが、実行時の動作を必要とする場合は、ng-ifを使用する必要があります。