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

I have a table that gets filled with information from the database. It also has a Submit button. If the person on that row respect a certain condition that I check in controller, the button shouldn't appear. How can I do this?

我有一个表填充了数据库中的信息。它还有一个Submit按钮。如果该行上的人员尊重我在控制器中检查的某个条件,则该按钮不应出现。我怎样才能做到这一点?

I tried setting up a function that returns true or false but that function will run continuosly and crashes my program. I also tried setting up that function to run at some interval and again, it didn't change the button. The problem is I think that at the begining, when I load the page, the client can't take any information from the table, it always gets undefined.

我尝试设置一个返回true或false的函数,但该函数将连续运行并崩溃我的程序。我也尝试将该功能设置为以某个间隔运行,并且再次,它没有更改按钮。问题是我认为在开始时,当我加载页面时,客户端无法从表中获取任何信息,它总是未定义。

Code 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>

Right now it just dissapears after I click on it which is not ok because when I reload, it appears again.

现在它只是在我点击它之后消失,这是不行的,因为当我重新加载时,它再次出现。

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

this will return true or false I think based on what it gets from Interview.checkIfAdded.

根据Interview.checkIfAdded的内容,这将返回true或false。

2 个解决方案

#1

IN this new code, i show the button based on a function called 'showButton'; the id is passed in.

在这个新代码中,我基于一个名为'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>

#2

If you have this interview data populated from your database (probably received via an AJAX request on load), you need to have a certain flag (for instance, interview.isAdded) that will define whether the button should be displayed displayed or not. So, when the button is clicked, your $ctrl.addParticipant function should change both local and remote isAdded property, so that next time you load the application, it would not show this certain participant once again. You probably have to change your backend logic to return interview.isAdded value dynamically for the current user.

如果您从数据库填充了这个访谈数据(可能是在加载时通过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>

And in your controller:

在你的控制器中:

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


}

Note that if you use a function in view, it is going to be on each digest cycle, so it's not a good idea to do some heavy things (like checking if interview is added via AJAX request) in there.

请注意,如果您在视图中使用某个函数,它将在每个摘要周期中进行,因此在那里做一些繁重的事情(比如检查是否通过AJAX请求添加了访谈)并不是一个好主意。

If you used setTimeout and the results did now show up on time, you should use the $timeout service instead. It works similarly but is angular-aware, so any delayed changes will be displayed on the page once they are made.

如果您使用了setTimeout并且结果现在按时显示,则应该使用$ timeout服务。它的工作方式类似,但具有角度感知功能,因此任何延迟的更改都会在页面显示后显示在页面上。

#1