Question

我有一个表格，里面充满了数据库中的信息。它还有一个Submit按钮。如果该行上的人尊重我在控制器中检查的特定条件，则该按钮不应出现。我怎么能这样做？

我尝试设置一个返回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服务。它的工作方式类似，但具有角度感知功能，因此任何延迟的更改都会在页面显示后显示在页面上。

角度按钮，根据表行信息隐藏在负载上

2 个答案: