在桌子上的角度ngif按钮

时间:2016-06-01 11:20:12

标签: html angularjs angular-ng-if

我正在尝试制作一个表,其中有两个显示/隐藏按钮,两个列说A和B ..按钮a和b分别正常运行但如果我在表中使用两个...只有其中一个功能其他人没有做任何事情。请帮助我,我是新来的

<table datatable="ng" class="row-border hover table table-condensed no-margin">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Username</th>>
                            <th>Profile</th>
                            <th>Points</th>
                            <th>Forcasts Won/Lost</th>
                            <th>Invites</th>
                            <th>Referrals</th>
                            <th>Activity</th>
                            <th>Most Used Redeemption Gateway</th>
                            <th>Most Read FAQ</th>
                            <th>Promo Codes used</th>
                            <th>Suspend/Unsuspend</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat-start="person in showCase.persons">
                            <td>{{person.id}}</td>
                            <td>{{person.uname}}</td>
                            <td>
                                <button type="button" class="btn btn-primary" ng-if="person.Profexpanded" ng-click="person.Profexpanded = false;person.Invexpanded=false">Hide</button>
                                <button type="button" class="btn btn-primary" ng-if="!person.Profexpanded" ng-click="person.Profexpanded = true;person.Invexpanded=false">Show</button>
                            </td>
                            <td>{{person.points}}</td>
                            <td>{{person.forcasts}}</td>
                            <td style="padding:5px">
                                <table><tbody>
                                <tr><td><b>sent: </b></td> <td>{{person.invites[0].sent}}</td></tr>
                                <tr><td><b>accepted:</b></td> <td>{{person.invites[0].accepted}}</td></tr> 
                                </tbody></table>   
                            </td>
                            <td>{{person.referrals}}</td>
                            <td>
                                <button type="button" class="btn btn-primary" ng-if="person.Invexpanded" ng-click="person.Invexpanded = false;person.Profexpanded = false">Hide</button>
                                <button type="button" class="btn btn-primary" ng-if="!person.Invexpanded" ng-click="person.Invexpanded = true;person.Profexpanded = false">Show</button>
                            </td>
                            <td>{{person.muredempt}}</td>
                            <td>{{person.mfaq}}</td>
                            <td>{{person.promocodes}}</td>
                            <td>{{person.isSuspended}}</td>
                        </tr>
                        <tr ng-if="person.Profexpanded" ng-repeat-end="">
                            <td class = "profile" colspan="5">
                                Hello A
                            </td>
                        </tr>
                        <tr ng-if="person.Invexpanded" ng-repeat-end="">
                            <td>Hello B</td>
                        </tr>
                    </tbody>
                </table>
                <!--end .card-body -->
            </div>`

2 个答案:

答案 0 :(得分:0)

也许尝试ng-show而不是ng-if <tr ng-show="person.Invexpanded" ng-repeat-end="">

答案 1 :(得分:0)

使用  <tr ng-if="person.Profexpanded"> 代替  <tr ng-if="person.Profexpanded" ng-repeat-end="">