Question

我正在使用ng-repeat进行角度表。所有它的工作，但在某些情况下，json返回一些数据，如PA-AC-DE，我想在表中的Pending，Active和deactivate中更改它。而且我不知道我该怎么做。 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>

Answer 1

您可以使用过滤器

{{object.ActivationStatus | statusFilter}}

和statusFilter将是：

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

Answer 2

基于AWolf回答过滤器，这里使用控制器中的一个函数：

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>

Answer 3

我认为您应该在模块中创建一个过滤器：

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

然后在模板中使用它：

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

这种方式可以让您在任何模板中重复使用此过滤器，避免重复的代码。

Answer 4

您可以使用ng-show显示文本，具体取决于API返回的值，如下所示：

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

等等。

Answer 5

使用自定义过滤器方法，它将在下面的演示中或jsfiddle处显示。

但是具有相同代码的getter函数也可以。

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>

Answer 6

您可以创建一个返回所需值的javascript函数：

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

}

现在，您可以在HTML中保持所有内容相同但替换为：

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

到

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

角度ng重复变化值

6 个答案: