根据服务器返回的状态改变前端显示的内容（Angular 过滤器）

     最近在做一个以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>

输出结果为：

                                 


本文纯属作为个人笔记。