代码之家 › 专栏 › 技术社区 › ricardol

如果内部ng repeat未过滤我的数组,则为ng

angular-ng-if angularjs-ng-repeat angularjs

ricardol · 技术社区 · 7 年前

[{"label":"wlan1","type":"wlan1"},
 {"label":"br-wlan","type":"br-wlan"},
 {"label":"tun_cas","type":"tun_cas"},
 {"label":"nfacct_bytes","type":"nfacct_bytes"},
 {"label":"wlan0","type":"wlan0"},
 {"label":"lte0","type":"lte0"},
 {"label":"nfacct_packets","type":"nfacct_packets"}]

在我看来,我不想显示nfacct\u字节和nfacct\ u数据包的类型,为此我做了以下工作:

<tab ng-if="type.label !== 'nfacct_bytes' || type.label !== 'nfacct_packets'" 
     ng-repeat="type in dataGraph.network.types" heading="{{type.label}}"
     select="changeSubTab(type.type)" disable="!tabClick" >

解决方案:

<tab ng-if="type.label !== 'nfacct_bytes' && type.label !== 'nfacct_packets'" 
     ng-repeat="type in dataGraph.network.types" heading="{{type.label}}"
     select="changeSubTab(type.type)" disable="!tabClick" >

2 回复 | 直到 7 年前

Sajeetharan 7 年前

我想你需要这样检查,

<tab ng-if="type.label !== 'nfacct_bytes' && type.label !== 'nfacct_packets' "> 
</tab>

演示

var myApp=angular.module('myApp',[]);
 myApp.controller('thecontroller',function($scope){
       $scope.dataGraph = {};
       $scope.dataGraph.network = {};
         $scope.dataGraph.network.types = [{"label":"wlan1","type":"wlan1"},{"label":"br-wlan","type":"br-wlan"},{"label":"tun_cas","type":"tun_cas"},{"label":"nfacct_bytes","type":"nfacct_bytes"},{"label":"wlan0","type":"wlan0"},{"label":"lte0","type":"lte0"},{"label":"nfacct_packets","type":"nfacct_packets"}];
});

<!DOCTYPE html>
    <html>
        <head>
          <title>ng-Messages Service</title>
          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
            <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        </head>
        <body ng-app="myApp">
            <div ng-controller='thecontroller'>
            <div  ng-repeat="type in dataGraph.network.types">
           <div ng-if="type.label !== 'nfacct_bytes' && type.label !== 'nfacct_packets' "> {{type.label}}
            </div>
            </div>
            </div>
        </body>
    </html>

himanshu 7 年前

使用

在filter中,表达式可以是字符串、对象或函数。这里我用过 表达式作为对象 .

让控制器像这样

  app.controller('MainCtrl', function($scope) {
    $scope.Values = 
     [{"label":"wlan1","type":"wlan1"},
     {"label":"br-wlan","type":"br-wlan"},
     {"label":"tun_cas","type":"tun_cas"},
     {"label":"nfacct_bytes","type":"nfacct_bytes"},
     {"label":"wlan0","type":"wlan0"},
     {"label":"lte0","type":"lte0"},
    {"label":"nfacct_packets","type":"nfacct_packets"}];
});

所需的HTML

  <div ng-repeat="value in Values |filter: {type: '!nfacct_bytes'}">
      {{value.label}}
  </div>

https://plnkr.co/edit/IUvaZbzHdV0M1s9TRzAq?p=preview

推荐文章

Yeenkash · 我的angular ng repeat div在浏览器中添加了注释[关闭]

6 年前

mBo · Angularjs svg图形ng在范围内重复

6 年前

Harish Kumar · angular js:单击products list build内数量增加和减少按钮的事件,ng repeat反映每个列表数量编号

6 年前

Juan I. Morales Pestana · 错误:[$注入器:unpr]rangeFilterProvider中出错

7 年前

ASP.net and angularjs · 无法从代码中看到使用AngularJS动态创建的文本框的值

7 年前

amacdonald · 如果长度>0时正确显示,但长度==0时不显示,则为ng

7 年前

user9130953 · ng repeat下拉列表,以限制多次选择相同的值

7 年前

Ro_nair · 具有Angular JS和MySql的表显示重复的中继器键

7 年前

Celia · ng模型的Angularjs动态名称

7 年前

Güney SaramalÄ± · 如果动态加载页面,则Ng repeat不起作用

7 年前