Javascript 如何在angularJS中隐藏表中的行？

显示表格的HTML代码-

    <table class="table table-bordered table-striped table-condensed">
        <thead class="TableHeader"> 
            <tr>
                <th>Role</th>
                <th>Name</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody> 
            <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)">
                <td>{{i.role }}</td>
                <td>{{i.name}}</td>
                <td>{{i.id}}</td>
            </tr>
        </tbody>
    </table>

现在我想修改上面的代码以隐藏客户角色为“XXX”的行。请让我知道如何实现它

注意-我不想从allCustomerInfoArray中删除角色为“XXX”的客户

<table class="table table-bordered table-striped table-condensed">
    <thead class="TableHeader"> 
        <tr>
            <th>Role</th>
            <th>Name</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody> 
        <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)" ng-if="i.role!='XXX'>
            <td>{{i.role }}</td>
            <td>{{i.name}}</td>
            <td>{{i.id}}</td>
        </tr>
    </tbody>
</table>

---

阅读更多信息：

您可以这样显示使用ng隐藏：

        <tr ng-repeat="i in allCustomerInfoArray track by $index" ng-click="showCustomerinfo($index)" ng-hide="i.role=='XXX'">

希望它有助于

在行中使用ng hide='i.role='XXX''

或

ng秀！='i、 角色==“XXX”' 或

ng if=='i.role=“XXX”

---

以上任何一项都可以获得预期的结果

您可以使用

ng hide

来完成此操作。像这样：

<tr ng-repeat="i in allCustomerInfoArray track by $index"
    ng-click="showCustomerinfo($index)"
    ng-hide="i.role === 'XXX'">

---

但是请注意，

ngif

的性能不如

nghide

，但是如果这是您的事情，您将把

tr

标记完全从DOM中拉出。

以上所有答案都是正确的，但是您应该知道，ngif将从DOM中删除对象。ng hide或ng show只会将其隐藏。 附加ng if将创建自己的作用域

---

您可以使用angular

filter

来实现相同的效果，并将其别名为

作为filterCustomer

，使用页面上任何位置的

filterCustomer

来使用过滤结果

标记

<tbody> 
    <tr ng-repeat="i in allCustomerInfoArray | filter: {role: 'XXX' } track by $index as filterCustomer" ng-click="showCustomerinfo($index)">
        <td>{{i.role }}</td>
        <td>{{i.name}}</td>
        <td>{{i.id}}</td>
    </tr>
</tbody>

---

提示：仅呈现角色为“XXX”的行@NithinKumarBiliya你也考虑过这个选项吗？？

<tr ng-repeat="i in allCustomerInfoArray track by $index"
    ng-click="showCustomerinfo($index)"
    ng-hide="i.role === 'XXX'">

<tr ng-repeat="i in allCustomerInfoArray track by $index"
    ng-click="showCustomerinfo($index)"
    ng-if="i.role !== 'XXX'">

<tbody> 
    <tr ng-repeat="i in allCustomerInfoArray | filter: {role: 'XXX' } track by $index as filterCustomer" ng-click="showCustomerinfo($index)">
        <td>{{i.role }}</td>
        <td>{{i.name}}</td>
        <td>{{i.id}}</td>
    </tr>
</tbody>

$http.get('/api/getentity')
.then(function(res){
   $scope.filterCustomers = $filter('filter')(res.data, {role: 'XXX' }); //filtered result
}, 
function(res){
   console.log("Log error");
})