根據表格行信息隱藏加載的角度按鈕

Question

我有一張表格，裏面充滿了來自數據庫的信息。它也有一個提交按鈕。如果該行上的人尊重我登記控制器的某個條件，則該按鈕不應出現。我怎樣才能做到這一點？

我試着設置一個返回true或false的函數，但該函數會連續運行並崩潰我的程序。我也嘗試設置該功能在一段時間間隔運行，並沒有改變按鈕。問題是我認爲，在開始時，當我加載頁面時，客戶端無法從表中獲取任何信息，它總是未定義。

代碼的html：

<form> 
<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>Id</th> 
     <th>Status</th> 
     <th>Location</th> 
     <th>Start</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr data-ng-repeat="interview in $ctrl.pendingInterviews"> 
     <td>{{ interview.id }}</td> 
     <td>{{ interview.status }}</td> 
     <td>{{ interview.location }}</td> 
     <td>{{ interview.start | date:'medium' }}</td> 
     <td><input type="submit" name="Submit" id="submit" ng-hide="varDiv" ng-click="varDiv = true; $ctrl.addParticipant(interview.id)"></td> 
    </tr> 
    </tbody> 
</table></form> 

現在它後，我點擊它，這也不行，因爲當我重新加載，它再次出現只是自敗。

this.checkIfAdded = function checkParticipant(interviewId) { 
        var participant={ 
         username:"mama", 
         interviewId:interviewId 
        }; 
        return Interview.checkIfAdded(JSON.stringify(participant)) 
         .then(
          function (errResponse) { 
           console.error('Error while fetching pending interviews'); 
          } 
         ); 
       } 

這將返回true或false我認爲它基於從Interview.checkIfAdded獲得的內容。

Answer 1

在這個新代碼中，我顯示了一個基於名爲'showButton'的函數的按鈕;該ID在過去了。

 <div ng-app="app" ng-controller="ctrl"> 

     <form> 
      <table class="table table-hover"> 
       <thead> 
       <tr> 
        <th>Id</th> 
        <th>Status</th> 
        <th>Location</th> 
        <th>Start</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr data-ng-repeat="interview in pendingInterviews"> 
        <td>{{ interview.id }}</td> 
        <td>{{ interview.status }}</td> 
        <td>Room {{ interview.location }}</td> 

        <td><input type="submit" name="Submit" id="submit" ng-show="showButton(id)" ng-click="click(interview.id)"></td> 
       </tr> 
       </tbody> 
      </table></form> 
     </div> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
     <script> 

        var app = angular.module("app", []); 

        app.controller("ctrl", function($scope){ 

         $scope.pendingInterviews = [ 
          {id: 1, status: "ontime", location: 1 },      
          {id: 2, status: "canceled", location: 3 }, 
          {id: 3, status: "ontime", location: 7 } 
         ] 

         $scope.showButton = function(id){ 

          return false; 
         } 

        }); 


     </script> 

Answer 2

如果你從你的數據庫（很可能是通過對負載的AJAX請求接收）填充這個訪談資料，你需要有一定的標誌（例如，interview.isAdded），其將定義按鈕是否應該顯示或不顯示。因此，單擊按鈕時，$ ctrl.addParticipant函數應該更改本地和遠程isAdded屬性，以便下次加載應用程序時，它不會再次顯示此特定參與者。您可能必須更改後端邏輯才能爲當前用戶動態返回interview.isAdded值。

<tr data-ng-repeat="interview in $ctrl.pendingInterviews"> 
    <td>{{ interview.id }}</td> 
    <td>{{ interview.status }}</td> 
    <td>{{ interview.location }}</td> 
    <td>{{ interview.start | date:'medium' }}</td> 
    <td><input type="submit" name="Submit" id="submit" ng-hide="interview.isAdded" ng-click="$ctrl.addParticipant(interview)"></td> 
</tr> 

而在你的控制器：

this.addParticipant = function(interview) { 
    interview.isAdded = true; // Hides the button immediately. 
    // Do something to save the state on the backend, so that the button will not show up next time. 
var participant = { 
    username: "mama", 
    interviewId: interview.id 
}; 
return Interview.addInterview(JSON.stringify(participant)).then(function(response) { 
    console.log('Added'); 
},function (error) { 
    console.error('Error while fetching pending interviews'); 
}); 


} 

請注意，如果您使用的視圖功能，它會在每個消化週期，所以它不是一個好主意，做一些重的東西（如檢查是否通過AJAX請求添加訪談）。

如果您使用setTimeout並且結果現在按時顯示，則應該使用$ timeout服務。它的工作原理類似，但角度感知，所以任何延遲的更改將在頁面製作後顯示在頁面上。