Custom filter in json array angularjs

Question

I'm new in Angularjs,i succeed to display every value from the key "type" from my json array ,but i want only to display "type" if the value is equal to "service" how can i do that. I tried to do with custom filter but i don t understand how it works. Thanks for advance for your help !

Here is my controller :

 .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;


    })

})

here is my view :

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

and here is my 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
    }
  ]
}

Ran Sasportas · Accepted Answer · 2016-03-22 12:55:09Z

2

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

ng-model is not required! is is meant for inputs and two data binding.

for the condinonallity use ng-if

answered Mar 22, 2016 at 12:55

Ran Sasportas

2,2661 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arizona2014 · Accepted Answer · 2016-03-22 13:03:41Z

2

Or you can use a filter like this :

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

answered Mar 22, 2016 at 13:03

Arizona2014

1,3472 gold badges18 silver badges33 bronze badges

Comments

Vinit Solanki · Accepted Answer · 2016-03-22 12:57:52Z

1

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

answered Mar 22, 2016 at 12:57

Vinit Solanki

2,0412 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Custom filter in json array angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related