CODEWITHSUNDEEP
javascriptangularjs
david raja
david raja

Reputation: 87

Angular ng-repeat change values

I'm doing a table with angular using ng-repeat. And all it's work but in some cases the json return me some data like PA-AC-DE and i want to change this in the table in Pending, Active and deactivate. And i don't know how i can do it. enter image description here

<table class="table table-bordered table-hover table-striped dataTable no-footer" data-sort-name="name" data-sort-order="desc">
    <tr role="row" class="info text-center">
        <th ng-click="order('msisdn')">Número Teléfono</th>
        <th ng-click="order('icc')">ICC</th>
        <!--th>IMEI</th-->
        <th ng-click="order('ActivationStatus')">Estado</th>
        <th ng-click="order('sitename')">Instalación</th>
        <th ng-click="order('siteaddress')">Dirección</th>
        <th ng-click="order('sitecity')">Ciudad</th>
        <th ng-click="order('sitezip')">Código Postal</th>
        <th ng-click="order('phonedesc')">Modelo Teléfono</th>
        <th ng-click="order('ContractingMode')">VBP</th>
    </tr>
    <tr class=" text-center" ng-repeat-start="object in filteredsites = (objects | filter:searchText) | filter:tableFilter| orderBy:predicate:reverse" ng-click="showDetails = ! showDetails">
        <td>{{object.msisdn}}</td>
        <td>{{object.icc}}</td>
        <td>{{object.ActivationStatus}}</td>
        <td>{{object.sitename}}</td>
        <td>{{object.siteaddress}}</td>
        <td>{{object.sitecity}}</td>
        <td>{{object.sitezip}}</td>
        <td>{{object.phonedesc}}</td>
        <td>{{ object.ContractingMode ? 'Yes': 'No'}}</td>
    </tr>
</table>

Upvotes: 2

Views: 823

Answers (6)

Carsten
Carsten

Reputation: 4208

You can create a javascript function that returns your desired value:

$scope.getFullActivationText = function(input) {
if (input === 'PA') {
    return 'Pending';
}
else if (input === 'AC') {
    return 'Active';
}
else if (input === 'DE') {
    return 'Deactivate';
}

}

Now you can keep everything the same in your HTML but replace:

<td>{{object.ActivationStatus}}</td>

into

<td>getFullActivationText(object.ActivationStatus)</td>

Upvotes: 1

David Almeida
David Almeida

Reputation: 11

I think you should create a filter in your module:

ngModule.filter('phoneNumberStatus', function() {
    statuses = {
        AC: 'Active'
        DE: 'Unactive'
    }
    return function(value) {
        return statuses[value] || "Unknown"
    }
})

and then use it in your template:

<td>{{ object.ActivationStatus | phoneNumberStatus }}</td>

This way will enable you to reused this filter in any template, avoiding duplicated code.

Upvotes: 1

Michael Laffargue
Michael Laffargue

Reputation: 10314

Based on AWolf answer with filter, here is using a function in the controller:

http://jsfiddle.net/f4bfzjct/

angular.module('demoApp', [])
  .controller('mainController', function() {
    var vm = this;
    vm.data = [
        {status:'AC'},
        {status:'AC'},
        {status:'DE'},
        {status:'PA'},
    ];

    vm.getFullStatus = function(value) {

        var labels = {
            AC: 'active',
            DE: 'deactive',
            PA: 'pending'
        };

        return labels[value];

    }
});

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    <ul>
        <li ng-repeat="row in ctrl.data">
            status: {{ctrl.getFullStatus(row.status)}}
        </li>
    </ul>
</div>

Upvotes: 1

scokmen
scokmen

Reputation: 571

You can use a filter

{{object.ActivationStatus | statusFilter}}

and statusFilter will be like:

angular.module('module', []).filter('statusFilter', function() {
    return function(input) {
        //switch-case
   };});

Upvotes: 3

AWolf
AWolf

Reputation: 8990

With a custom filter method it would look like in the demo below or here at jsfiddle.

But also a getter function with the same code would be OK.

angular.module('demoApp', [])
.controller('mainController', function() {
    this.data = [
        {status:'AC'},
        {status:'AC'},
        {status:'DE'},
        {status:'PA'},
    ];
})
    .filter('filterStatus', function() {
        var labels = {
            AC: 'active',
            DE: 'deactive',
            PA: 'pending'
        };
        return function(input) {
            return labels[input];
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
    <ul>
        <li ng-repeat="row in ctrl.data">
            status: {{row.status | filterStatus}}
        </li>
    </ul>
</div>

Upvotes: 1

Jax
Jax

Reputation: 1843

You could use ng-show to show text depending on the value returned from your API like so:

<td><span ng-show="object.ActivationStatus=='AC'">Active</span><span ng-show="object.ActivationStatus=='PA'">Other Label</span></td>

and so on.

Upvotes: 1

Related Questions