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

时间:2016-03-22 12:48:53

标签: javascript angularjs json ionic-framework angularjs-filter

我是Angularjs的新手,我成功地从我的json数组中显示键“type”中的每个值,但是如果值等于“service”我只想显示“type”我该怎么做呢。 我尝试使用自定义过滤器,但我不明白它是如何工作的。 感谢您的帮助!

这是我的控制器:

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


    })

})

这是我的观点:

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

这是我的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
    }
  ]
}

3 个答案:

答案 0 :(得分: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不是必需的!是用于输入和两个数据绑定。

用于condinonallity使用ng-if

答案 1 :(得分:2)

或者你可以使用这样的过滤器:

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

答案 2 :(得分:1)

使用ng-if =&#34; item.type ==&#39; service&#39;&#34;

var text;

    //Request senden
    try {
        text = new XMLHttpRequest();
        text
                .open(
                        'URL is placed here'); //  
        asyncRequest.send(null);
    } catch (exception) {
        alert("Request to Database failed!!");
    }