根据服务器返回的状态改变前端显示的内容（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>

输出结果为：

                                 

本文纯属作为个人笔记。