怎么动态改变后端传过来的数据中某一个值，并用angularjs显示在页面上

Question

初学前端……第一次用angular写……只会直接把数据展示出来。问题可能会有点弱智，望解答……

传过来的数据是这样的，想要在status为1时“当前状态”显示激活，“操作”中显示关闭

js代码如下：

}).then(function(response){
            console.log(response.data)
            var data = response.data;
            if(data.ret && data.ret['ret_code'] == "0"){
                $scope.data.adList = data.data.ads;
                if (data.data['status'] == "0") {
                    $scope.switchStatus = "激活";//改在这里。结果发现变成了一个固定的值，而不是原本期望的动态改变每一个值
                    $scope.currentStatus = "关闭";
                }else{
                    $scope.switchStatus = "关闭";
                    $scope.currentStatus = "激活";
                }
                $scope.pagination.setTotal(data.data.pagination.sum);
            }
        });

html代码如下：

<tr ng-repeat="item in data.adList" class="table-row">
            <td class="table-cellk">
                <a class="link" ng-click="info(item.id)">{{item.id}}</a>
            </td>
            <td class="table-cell">{{item.name}}</td>
            <td class="table-cell">{{item.app}}</td>
            <td class="table-cell">{{item.system}}</td>
            <td class="table-cell">{{item.xxxxx}}</td>
            <td class="table-cell">{{item.createTime}}</td>
            <td class="table-cell">{{currentStatus}}</td>
            <td class="table-cell">
                <a class="link" ng-click="edit(item.id)">编辑</a>
                <a class="link" ng-click="delete(item.id)">删除</a>
                <a class="link" ng-click="switch(item.id)">{{switchStatus}}</a>
                <a class="link" ng-click="info(item.id)">详情</a>
            </td>
        </tr>

Answer 1

不需要在js里判断
<tr ng-repeat="item in data.adList" class="table-row">

        <td class="table-cellk">
            <a class="link" ng-click="info(item.id)">{{item.id}}</a>
        </td>
        <td class="table-cell">{{item.name}}</td>
        <td class="table-cell">{{item.app}}</td>
        <td class="table-cell">{{item.system}}</td>
        <td class="table-cell">{{item.xxxxx}}</td>
        <td class="table-cell">{{item.createTime}}</td>
        <td class="table-cell">{{item.status==1?'激活':'状态为0时显示的文字' }}</td>
        <td class="table-cell">
            <a class="link" ng-click="edit(item.id)">编辑</a>
            <a class="link" ng-click="delete(item.id)">删除</a>
            <a class="link" ng-click="switch(item.id)">{{item.status==1?'关闭':'状态为0时显示的文字' }}</a>
            <a class="link" ng-click="info(item.id)">详情</a>
        </td>
    </tr>

Answer 2

<td class="table-cell">
    <a class="link" ng-click="edit(item.id)">编辑</a>
    <a class="link" ng-click="delete(item.id)">删除</a>
    <a class="link" ng-show="item.status" ng-click="fun()">激活</a>
    <a class="link" ng-show="!item.status" ng-click="fun()">关闭</a>
    <a class="link" ng-click="info(item.id)">详情</a>
</td>

这样就OK了吧

Answer 3

写在HTML模板里面吧，并建立一个翻译表，比如：

let translateMap = {
    status: {
        0: '未激活',
        1: '激活'
    }
}

<td class="table-cell">{{translateMap.status[item.status]}}</td>

这样如果后面要调整枚举，也可以直接在翻译表里面配置，不用到一坨HTML模板里面扒拉