简体   繁体   English

json数组angularjs中的自定义过滤器

[英]Custom filter in json array angularjs

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. 我是Angularjs的新手,我成功地从我的json数组中显示键“type”中的每个值,但我想只显示“type”,如果值等于“service”我该怎么做。 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 : 这是我的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
    }
  ]
}
   <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! 不需要ng-model! is is meant for inputs and two data binding. is用于输入和两个数据绑定。

for the condinonallity use ng-if 对于condinonallity使用ng-if

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>

use ng-if="item.type=='service'" 使用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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM