基於表行信息在加載時隱藏的角度按鈕

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

我認為這將基於從Interview.checkIfAdded獲得的結果返回true或false。

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請求接收到的），則需要具有某個標志（例如，訪問i.dependent），以定義是否顯示按鈕。 因此，單擊該按鈕時，您的$ ctrl.addParticipant函數應同時更改本地和遠程iFyre屬性，以便下次加載該應用程序時，它不會再次顯示該特定參與者。 您可能必須更改后端邏輯才能返回“訪問”。i為當前用戶動態添加值。

<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服務。 它的工作原理類似，但是可以識別角度，因此任何延遲的更改一旦完成都會顯示在頁面上。