发表于: 2017-06-28 23:41:07

1 876


1、列表操作栏中,上下线按钮。主要是根据职位本身的状态反向确定操作栏的操作要求,同时对弹出提示框的定义也不一样,这里引用了三元表达式,同时在完成状态改变后,增加了一个页面刷新。删除按钮操作类似,就不单写了。

html代码主要是增加了三个代参函数,传参数据即为反馈列表信息list,x为'x in list'中任意码。

<td class="td3"><a  ng-click="editOnline(x)"  >{{x.status | changeOnline}}</a><a ng-click="edit(x)" >编辑</a><a  ng-click="editDelete(x)" >删除</a></td>    //html页面代码

js文件代码,利用反馈信x,读取当前职位表各种状态。

//上下线按钮
$scope.editOnline=function (x) {
   idX=x.id;
   statusX=(x.status==1)?2:1;  //三元,反向赋值
   console.log(statusX);
   var xx1=(x.status==1)?"确定要上线?":"确定要下线?";
   var xx2=(x.status==1)?"上线成功":"下线成功";
   if(confirm(xx1)){
       $http.put("/carrots-admin-ajax/a/u/article/status?" + "id="+idX+ "&status="+statusX)
           .success(function (response) {
               console.log(response);
               alert(xx2);
               $window.location.reload();  //刷新页面
           })};
}

2、列表操作栏中,编辑按钮。由于和新增Article页面是共享同一个页面,需要修改很多东西。

 ...

       .state("main.new2", {url: '/new2?:id',params:{'id':null}, templateUrl: 'new_article.html',controller:"new_article"})  //新增页

...

})

路由修改url: '/new2?:id'比原来的代码新增了'?:id'的部分,即带入当前职位id信息并引入url传参,同时赋值params:{'id':null},在id未定义时(新增页面),url正常显示,没有?之后的后缀显示。当从编辑操作进入时,激活id,并通过url+?id的方式进行传参及跳转。实现编辑状态下,页面链接刷新有效的功能。

3、跳转到编辑页面

.controller('new_article',function($scope,$http,$stateParams){

   var idXX=$stateParams.id;  //取上个页面的id值传送 

   //判定编辑状态页执行以下更改
   if(idXX!=undefined){
      

       var industryX="";  //先赋值为空,否则传参时报错

       //改变文本表头信息

       document.getElementById("ArticleTitle").innerHTML="编辑Article";
       $http.get("/carrots-admin-ajax/a/article/" + idXX)
           //成功后读取状态并赋值到文本框,type等需要过滤,这里未写出。
           .success(function (response){
               $scope.title=response.data.article.title;
               $scope.type=typeX;
               $scope.content=response.data.article.content;
               $scope.url=response.data.article.url;
               $scope.industry=industryX;
               imgSD=response.data.article.img;
               document.getElementById('result').innerHTML = "<img src='"+response.data.article.img+"' />";
           });
        //预览框提示信息隐藏(图片已经是加载状态)
       document.getElementById('spanNone').style.display="none";
   }

页面内主要是先判断是否存在id信息,如果有,则通过id获取该职位的信息,并赋值到文本框里面,同时对部分文本有修改。

4、最后就是编辑状态下,两个提交按钮的http请求,这里接口请求报错,还要看看有什么问题,另外官网任务资源里面,接口信息是错的。编辑状态少了type字段,同时status的说明是状态。

收获:了解了url路由传参,应用了三元表达式(if函数简化版),有一些页面逻辑上的应用。

困难:各种接口报错,现在卡在编辑页面上线按钮,postman也报错(不清楚是不是需要登录状态,软件无法实现功能导致?)

计划:卡壳就很麻烦,解决的话今天完成任务9。



返回列表 返回列表
评论

    分享到