ng-if里面的ng-repeat没有过滤我的数组

时间:2022-07-21 20:33:51

Hy evryone, im trying to display tabs with a value inside my types array wchich has

Hy evryone,我试图在我的类型数组中显示带有值的标签wchich

[{"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"}]

In my view I dont want to display the types nfacct_bytes and nfacct_packets and for that I was doing:

在我看来,我不想显示类型nfacct_bytes和nfacct_packets,为此我正在做:

<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" >                                                                                                

Solution:

解:

<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 个解决方案

#1


2  

I think you need to check like this,

我想你需要像这样检查,

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

DEMO

DEMO

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>

#2


2  

Use filter function of angularJS. It Selects a subset of items from array and returns it as a new array.

使用angularJS的过滤功能。它从数组中选择项的子集并将其作为新数组返回。

In filter the expression could be of string,object or function. Here I have used expression as object.

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

Let the controller be like this

让控制器像这样

  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"}];
});

The required HTML

所需的HTML

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

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

工作人员https://plnkr.co/edit/IUvaZbzHdV0M1s9TRzAq?p=preview

#1


2  

I think you need to check like this,

我想你需要像这样检查,

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

DEMO

DEMO

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>

#2


2  

Use filter function of angularJS. It Selects a subset of items from array and returns it as a new array.

使用angularJS的过滤功能。它从数组中选择项的子集并将其作为新数组返回。

In filter the expression could be of string,object or function. Here I have used expression as object.

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

Let the controller be like this

让控制器像这样

  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"}];
});

The required HTML

所需的HTML

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

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

工作人员https://plnkr.co/edit/IUvaZbzHdV0M1s9TRzAq?p=preview