Using Angular filters

Question

I am using angular 1.5 in my application, where I am using the JSON response from a rest service call to display data on the UI. I have a requirement now to change the text shown on UI based on particular 'statu's which comes from the rest service call. Can someone help me on how to use angular filters to achieve this?

JSON Response :

var response = {
  "recordCnt": 1,
  "details": [{
    "type": "user",
    "**status**": 0
  }]
};

The **status** could be '1' as well as '2'. I need to show different verbages based on these values on the UI.

eg : If the status is '0', I will have to show 'inactive', 'active' if status is '1' and 'expired' in case of status '2'

Can you accept an answer if your issue is solved? :)

Mistalis
– Mistalis

2016-12-16 08:47:19 +00:00
Commented Dec 16, 2016 at 8:47 — Mistalis
– Mistalis, Commented Dec 16, 2016 at 8:47

Mistalis · Accepted Answer · 2016-11-28 14:24:24Z

1

I think you just need a ng-if condition in this case:

<div ng-if="response.details[0].status = 0">inactive</div>
<div ng-if="response.details[0].status = 1">active</div>
<div ng-if="response.details[0].status = 2">expired</div>

Try it on JSFiddle. You can play with the status value to see changes.

answered Nov 28, 2016 at 14:24

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

5 Comments

VishnuNair Over a year ago

Actually, I am using this status to be displayed in a cell of an angular UI grid . So I have to use filters for the same, since all the columns are configurable. Is it possible to do the same using a filter?

Mistalis Over a year ago

You can use ng-if on any HTML tag (not only div). If you work with a grid, you can adapt it to your needs (maybe a td instead of div?)

Mistalis Over a year ago

If you provide me a sample of your grid code, I guess I can adapt it for you.

VishnuNair Over a year ago

Below is how the 'status' column is configured for the grid, status: { name: 'status', displayName: 'User Status', editable: false, width: '100', cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity[col.field] | yourfilter}}</div>', } In the above snippet, 'yourfilter' is a filter function I expect to do the same which you explained in your answer.

Mistalis Over a year ago

You need to modify a bit your template (use external-scopes), look at this example.

Sajeetharan · Accepted Answer · 2016-11-28 14:31:03Z

1

You can use ng-if

 <div ng-controller="listController">
    <div ng-if="data.details[0].status == 0">inactive</div>
    <div ng-if="data.details[0].status == 1">active</div>
    <div ng-if="data.details[0].status == 2">expired</div>
  </div>

DEMO

answered Nov 28, 2016 at 14:31

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

VishnuNair · Accepted Answer · 2016-12-05 14:23:55Z

0

I was able to use a custom angular filter for the same, it worked. Thanks @sajeetharan and @mistalis for the inputs.

Cell level configuration:

cellTemplate: '{{row.entity[col.field] | getUserStatus}}' //'getUserStatus' is the filter used.

Filter :

    (function() {
    'use strict';
    var statusMap = {'inactive', 'active', 'expired'};
    var filter = function(statusMap) {
        return function(status) {
            return statusMap[status];   // 'status' could be '0', '1' and '2'
        };
    };

    angular.module('app.userSearch).filter('getUserStatus', filter);
})();

edited Dec 5, 2016 at 14:23

answered Dec 3, 2016 at 13:25

VishnuNair

1214 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using Angular filters

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related