今天主要进行的模块是任务10编辑页面。

1. 编辑页面，需要注意的问题是首先要将该页面原有内容渲染到编辑页面中，然后再针对页面进行编辑并提交内容

和之前做页面内容删除和状态上下线的思路一样，每一个信息都有对应的唯一一个id值，在这里也对这个id值进行操作

首先，也是使用ng-click传参

<button class="btn2" ng-click="chgInfo(msg.id)">编辑</button>

接下来，就是对ng-click触发事件进行操作

要对单个article进行编辑，首先要取得该id对应的内容，并且使用url进行传参并使用$state.go进行页面跳转

//点击编辑内容
$scope.chgInfo = function (id) {
    console.log(id);
    $http({
        method: "get",
        url: "/a/a/article/"+ id
    }).then(function success(response) {
        // $state.go("home.add",{});
        console.log(response);
        $state.go('home.add',{id:id});
    });
};

2. 接下来就是针对新增内容和编辑内容的判断

在这里判断的标准是是否有id，如果有id，则内容是进行编辑，没有id，则是新增内容，针对这个部分写一个if else判断

使用$stateParams传参

if ($stateParams.id == undefined) {
    //没有id，内容为新增，上线内容
    $scope.online = function () {
        $scope.params.content = editor.$txt.html();
        $http({
            method: "post",
            url: "/a/a/u/article",
            params: {
                title: $scope.params.title,
                type: $scope.params.type,
                status: 2,
                img: $scope.params.img,
                content: $scope.params.content,
                url: $scope.params.url
            }
        }).then(function success(response){
            $state.go('home.form',{page:1})
        });
    };
} else {
    //有id，内容为编辑
    //首先得到全部对应内容
    $http({
        method: "get",
        url: "/a/a/article/" + $stateParams.id
    }).then(function success(response){
        $scope.params=response.data.data.article;
        editor.$txt.html($scope.params.content)
    });

    //通过赋值的方式将内容体现在页面中
    $scope.online = function () {
        $http({
            method: "put",
            url: "/a/a/u/article/" + $stateParams.id,
            params:$scope.params
        }).then(function success(response){
            $state.go('home.form',{page:1})
        });
    };
}

通过赋值的方式将内容渲染到页面中

3.最后是使用ng-option体现states

$scope.ops = [{status: 0,name: "首页banner"}, {status: 1,name: "找职位banner"},{status: 2,name: "找精英banner"},{status: 3,name: "行业大图"}];
$scope.opts =[{status: 0,name: "移动互联网"},{status: 1,name: "电子商务"},{status: 2,name: "企业服务"},{status: 3,name: "O2O"},{status: 4,name: "教育"},{status: 5,name: "金融"},{status: 6,name: "游戏"}];

<div class="col-md-6 col-sm-6">
    <select name="" style="width: 20rem;" ng-model="params.type" ng-options="c.status as c.name for c in ops" required>
        <option value="">全部</option>
    </select>
</div>

<div class="col-md-5 col-sm-5">
    <select name="" id="" ng-if="params.type == 3" ng-model="params.industry" ng-options="x.status as x.name for x in opts" required>
        <option value="">全部</option>
    </select>
</div>

动态生成，不然会使类型栏无法更改

接下来尽快做完表单验证