Benutzerdefinierter Filter im JSON-Array angularjs

Question

Ich bin neu in Angularjs, es ist mir gelungen, jeden Wert aus dem Schlüssel "Typ" aus meinem JSON-Array anzuzeigen, aber ich möchte nur "Typ" anzeigen, wenn der Wert gleich "Service ist " wie kann ich das machen. Ich habe versucht, mit benutzerdefinierten Filter zu tun, aber ich verstehe nicht, wie es funktioniert. Vielen Dank für Ihre Hilfe!

Hier ist mein Controller:

<ion-view view-title="Catégories"> 
    <ion-content> 
     <div class="item item-divider submenu"> 
<p class="submenu col-25" ng-click="displaysales()">Ventes</p><p class="submenu col-25" ng-click="displaybuys()">achats</p><p class="submenu col-25" ng-click="displaycharges()">Charges</p><p class="submenu col-25" ng-click="displayperso()">Perso</p> 
     </div> 
     <ul class="list" ng-repeat="item in datab track by $index"> 
      <li class="item" ng-model="item.type">{{item.type}}</li> 
     </ul> 


    </ion-content> 
</ion-view> 

und hier ist mein json:

{ 
    "die": false, 
    "erreur": "", 
    "data": [ 
    { 
     "id": 913, 
     "name": "Justine/Ma first facture", 
     "type": "services", 
     "invoice": true 
    }, 
    { 
     "id": 914, 
     "name": "Justine/Facture 2", 
     "type": "services", 
     "invoice": true 
    }, 
    { 
     "id": 917, 
     "name": "Abus/Fact", 
     "type": "services", 
     "invoice": true 
    }, 
    { 
     "id": 930, 
     "name": "Abus/F - 00004", 
     "type": "", 
     "invoice": true 
    }, 
    { 
     "id": 931, 
     "name": "Test client/F - 00005", 
     "type": "", 
     "invoice": true 
    }, 
    { 
     "id": 8868, 
     "name": "Achat de marchandises", 
     "type": "buys", 
     "invoice": false 
    }, 
    { 
     "id": 10223, 
     "name": "adidas", 
     "type": "sales", 
     "invoice": false 
    }, 
    { 
     "id": 8870, 
     "name": "Apport personnel", 
     "type": "personals", 
     "invoice": false 
    }, 
    { 
     "id": 8867, 
     "name": "Carburant, entretien du véhicule", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8865, 
     "name": "Cotisation sociale", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8863, 
     "name": "Déplacement", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8872, 
     "name": "Emprunt", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8861, 
     "name": "Energie", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8871, 
     "name": "Fourniture de bureau", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8864, 
     "name": "Frais banque, assurance, juridique", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8877, 
     "name": "Logiciel, service web", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8866, 
     "name": "Loyer", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8874, 
     "name": "Mobilier", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8869, 
     "name": "Mon salaire, prélèvement personnel", 
     "type": "personals", 
     "invoice": false 
    }, 
    { 
     "id": 10779, 
     "name": "New law", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 10222, 
     "name": "nike", 
     "type": "services", 
     "invoice": false 
    }, 
    { 
     "id": 10778, 
     "name": "Pakpak", 
     "type": "sales", 
     "invoice": false 
    }, 
    { 
     "id": 8862, 
     "name": "Restauration", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8875, 
     "name": "Site web", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8873, 
     "name": "Sous-traitance", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8860, 
     "name": "Télécom", 
     "type": "charges", 
     "invoice": false 
    }, 
    { 
     "id": 8876, 
     "name": "Véhicule", 
     "type": "charges", 
     "invoice": false 
    } 
    ] 
} 

Answer 1

<ul class="list" ng-repeat="item in datab track by $index"> 
      <li class="item" ng-if="item.type === 'services'">{{item.type}}</li> 
     </ul> 

ng-Modell ist nicht erforderlich,

.controller('CategorieCtrl', function ($scope, $stateParams,$state,factocategories) { 

    var mytype = {}; 
    $scope.displaysales = function(){ 
     mytype = "sales"; 
     console.log(mytype); 
    } 
    $scope.displaybuys = function(){ 
     mytype = "buys"; 
     console.log(mytype); 
    } 
    $scope.displaycharges = function(){ 
     mytype = "charges"; 
     console.log(mytype); 
    } 
    $scope.displayperso = function(){ 
     mytype = "personals"; 
     console.log(mytype); 
    } 


    console.log(mytype); 
    var mytoken = sessionStorage.getItem('token'); 
    factocategories.send(mytoken).then(function(conf){ 
     console.log(conf); 
     $scope.datab = conf.data; 


    }) 

}) 

hier meiner Ansicht nach ! ist für Eingaben und zwei Datenbindungen gedacht.

für die condinonallity Verwendung ng-wenn

Answer 2

Verwendung ng-if = "item.type == 'Service'"

<ul class="list" ng-repeat="item in datab track by $index" ng-if="item.type=='service'"> 
      <li class="item" ng-model="item.type">{{item.type}}</li> 
     </ul> 

Answer 3

Oder Sie einen Filter wie folgt verwenden können:

<ul class="list" ng-repeat="item in datab track by $index | filter:{type:'services'}"> 
    <li class="item">{{item.type}}</li> 
</ul>