我正在尝试隐藏或过滤掉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> Items</a>
<a class="nav-item is-tab" ng-click="navCtrl.setItemData('weapons')"><i class="fa fa-wrench-o"></i> Weapons</a>
<a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> Armors</a>
<a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> Gold</a>
<a class="nav-item is-tab" ng-click="navCtrl.setItemData('armors')"><i class="fa fa-wrench" ></i> 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>