根据表行信息隐藏加载的角度按钮

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 请求接收），您需要有一个特定的标志（例如，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 服务。它的工作原理类似，但具有角度感知功能，因此任何延迟的更改一旦完成就会显示在页面上。