AngularJS - 在ng-repeat中过滤掉原始数据

时间:2016-10-14 17:41:19

标签: javascript html css angularjs

我正在尝试隐藏或过滤掉ng-repeated表中的原始数据。基本上,我有一个表和一个小的导航菜单,当我点击导航项时,它将从数组中提取数据,表将呈现该数据。

这里的问题是,在一两秒钟内,我会看到原始数据{{data.name}}。有没有办法过滤掉它,直到ng-repeat完成填充?

Picture of what I'm speaking about

我还试图在模态本身以及表格标签上使用ng-cloak,但我似乎无法使ng-cloak正常工作,即使使用了正确的css。

这是HTML:

<div class="modal is-active" ng-show="navCtrl.isModalActive('chooseItem')" ng-controller="RpgDataController as rpgData">
        <div class="modal-background" ng-click="navCtrl.closeModal('chooseItem')"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Choose An Item</p>
                <button class="delete" ng-click="navCtrl.closeModal('chooseItem')"></button>
            </header>

            <!---------------------------------------------------------------------------------------------------->
            <!--                                 Navigation Contents                                            -->
            <!---------------------------------------------------------------------------------------------------->
            <nav class="nav has-shadow">
                <div class="container">
                    <div class="nav-left">
                        <a class="nav-item is-tab" ng-click="navCtrl.setItemData('items')"><i class="fa fa-wrench"></i> &nbsp; Items</a>
                        <a class="nav-item is-tab" ng-click="navCtrl.setItemData('weapons')"><i class="fa  fa-wrench-o"></i> &nbsp; Weapons</a>
                        <a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> &nbsp; Armors</a>
                        <a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> &nbsp; Gold</a>
                        <a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> &nbsp; Exp</a>
                    </div>
                </div>
            </nav>
            <section class="modal-card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>ID</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody ng-repeat="data in rpgData.activeData.data">
                            <th ng-cloak>{{data.name}}</th>
                            <th  ng-cloak>{{data.id}}</th>
                            <th  ng-cloak>{{data.description}}</th>
                    </tbody>
                </table>
            </section>
            <footer class="modal-card-foot">
                <a class="button is-primary" ng-click="navCtrl.saveDataType('config')">Save changes</a>
                <a class="button" ng-click="navCtrl.closeModal('chooseItem')">Cancel</a>
            </footer>
        </div>
    </div>

0 个答案:

没有答案