javascript - angularjs的一个问题
大家讲道理
大家讲道理 2017-04-11 11:34:37
[JavaScript讨论组]

初学angularjs不久,遇到一个问题,比如我从后台获取的一个状态的值循环出来是1,3,2。但是我要在前端页面用对应的中文显示出来,比如1就要用采集中;2就要用采集中断,3就要用采集完成,思路应该是怎样的,获取有demo可以详解更佳。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(6)
ringa_lee
$scope.statusText = {
    1: '采集中',
    2: '采集中断',
    3: '采集完成'
}

<li ng-repeat="status in statuses">
    {{ statusText[status] }}
</li>

素不素最简洁 我都不禁要点个赞啦 哈哈

PHPz

看你的意思可能是有一个列表要显示状态,像下面这样:

-采集中
-采集中断
-采集完成

这样的页面controller中肯定会对应一个状态数组,也就是你说的1,2,3。假定你已经从服务端把数组取回来了,存在一个变量中,$scope.statuses = [1,2,3];。现在你只要把这个数组渲染到页面上就行了,用ng-repeat指令循环,代码:
<ul>

<li ng-repeat="status in statuses">
    {{status==2?'采集中断':(status<2?'采集中':'采集完成')}}
</li>

</ul>
稍微修改了一下,用了楼下@yzllee的写法,简洁多了!

ringa_lee

x==2?'采集中断':(x<2?'采集中':'采集完成')

PHPz

可以分成两部分,一部分是在js中将数据转换好,绑定在所用域上,另一部分是在页面解析转换之后的数据。

JS部分:

var data = [1, 3, 2]; //接口中返回的值

//将数据循环进行转换,并保存成一个新的数组
//然后,将这个数据绑定在$scope作用域上,用于页面渲染
$scope.values = data.map(function(value) {
    return format(data[i]);
});

//定义一个函数专门进行数据的转换,方便拓展
function format(type) {
    switch(type) {
        case 1:
            return '采用中';
        case 2:
            return '采用中断';
        case 3:
            return '采用完成';
        default:
            return type;
    }
}

HTML部分:

<p ng-repeat='value in values'>
    {{ value }} 
</p>
巴扎黑
.filter('toValue', function(){
    return function(val){
        switch(val){
            case 1:
                return "采集中";
            case 2:
                return "采集中断";
            case 3:
                return "采集完成";
            default: 
                return "";
        }
    }
})
<p ng-repeat='item in itemArr'>
    {{ item | toValue }} 
</p>
高洛峰
    switch (value){
        case 1:'采集中';
            break;
        case 2:'采集中断';
            break;
        case 3:'采集完成';
            break;
    }
    用switch就能解决
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号