根据服务器返回的状态改变前端显示的内容(Angular 过滤器)
来源:互联网 发布:数据变异程度 编辑:程序博客网 时间:2024/06/04 00:51
最近在做一个以Angular为框架的单页面网页应用。遇到这样一个小问题,就是前端的显示内容得根据后端返回的内容决定。举个栗子,前端要显示一个关于课程的列表,每个课程都有一个状态值,可以显示为“已上线”、“未上线”、“已结课”、“预开课”。如果直接接收服务器传回来的值,是直接显示“0”、“1”、“2”、“3”四种状态值。返回的是数值而不是中文。要解决这个问题,可以通过自定义一个过滤器,根据返回值,改变显示值。
HTML代码:
<tr ng-repeat="item in courseList"> <td>{{item.courseID}}</td> <td>{{item.courseName}}</td> <td>{{item.courseTime}}</td> <td>{{item.courseTeacher}}</td> <td>{{item.courseStatus}}</td> <!---此处就是课程状态值---></tr>
没有进行任何处理,直接显示为:
这是数据库里面存储的课程状态的值,直接显示出来,不方便用户查阅,所以必须转化为中文说明文字。
本人刚刚自学入门Angular,觉得用过滤器可以很好解决这个问题(可能有更好的办法)。解决方法如下:
JS代码:
app.filter("statusChangeName",function(){ return function(input){ var statusName = ""; if(input=="0"){ statusName = "已上线"; } if(input=="1"){ statusName = "未上线"; } if(input=="2"){ statusName = "已结课"; } if(input=="3"){ statusName = "预开课"; } return statusName; }})
HTML代码
<tr ng-repeat="item in courseList"> <td>{{item.courseID}}</td> <td>{{item.courseName}}</td> <td>{{item.courseTime}}</td> <td>{{item.courseTeacher}}</td> <td>{{item.courseStatus | statusChangeName }}</td> <!---此处就是课程状态值,增加一个过滤器---></tr>
输出结果为:
本文纯属作为个人笔记。
阅读全文
0 0
- 根据服务器返回的状态改变前端显示的内容(Angular 过滤器)
- 根据内容改变actionbar的menu菜单MenuItem的显示
- 根据状态值改变PopupMenu显示的菜单项
- Android 根据Edittext内容动态改变Listview显示的数据
- angular的过滤器
- angular的过滤器
- 简单的angular过滤器
- GridView使用技巧之:根据绑定的内容改变单元格(或者行)的显示样式
- Android-根据软键盘的显示与隐藏改变输入框的内容
- list contro控件根据单元格的内容改变显示的颜色
- 定义xml为drawable文件并根据状态改变显示的图片资源
- jquery ajax方法重写,利用statusCode对象根据服务器返回的不同状态进行处理
- 根据返回的电量,实现充电状态,充电完成电量显示
- android 根据EditText 内容,改变TextView显示
- 根据服务器的返回值动态设置HTML中select中option的显示
- angular的内置过滤器及自定义过滤器
- angular过滤器的使用和自定义过滤器
- Angular的过滤器和自定义过滤器
- 【bzoj1797】[Ahoi2009]Mincut 最小割
- Android绘图基础——仿华为加载动画
- 阿里云服务器 ECS 访问不了公网 ip 可能的原因及解决方法
- 十大算法之朴素贝叶斯
- 嵌入式OS入门笔记-以RTX为案例:三.初探进程
- 根据服务器返回的状态改变前端显示的内容(Angular 过滤器)
- Redis-跳表
- Ubuntu 如何设置静态IP
- 树莓大一下期末C++期末考试题及扩展思考
- HTC Vive Unity 教程
- 【笔记】【imooc】Javascript 正则表达式(Regular Expression)
- c++之const小结-使用注意
- c++ 里各种指针
- 剑指Offer(第二版)面试题45:把数组排成最小的数