发表于: 2017-07-19 21:56:20

1 834


今天主要进行了一部分任务10的工作。

1. 富文本编辑器

任务10需要给页面添加一个富文本编辑器,使用了wangEditor插件

html部分

<div class="row">
   <div class="col-md-12 col-sm-12 bording">
       <span>说明</span>
       <div id="div1" style="height: 300px; width: 100%" ng-model="params.content">
           <p>请输入内容...</p>
       </div>
   </div>
</div>

最开始考虑使用插入图片的方法使用注册指令制作一个自定义的标签,然后通过js文件将html内容添加到新增页面里,但是容易产生注入错误,所以改用将html部分直接添加到页面中的方式。

下载插件的字体文件和css样式,更改相对路径将内容放到主页面内,因为考虑到跳转页面之后的加载问题,不能把内容放到懒加载中。

2. ng-if的使用

在图片分类选择行业大图的时候,会再展开一个新的细分选项下拉菜单,但是其他分类不会使这个下拉菜单显示出来,所以要通过ng-if判断,当满足条件为true的时候,才会显示新的下拉菜单

根据value值进行这一部分判断

<div class="col-md-5 col-sm-5">
   <select name="" id="" ng-if="params.type == 3" ng-model="params.industry" required>
       <option value="">全部</option>
       <option value="0">移动互联网</option>
       <option value="1">电子商务</option>
       <option value="2">企业服务</option>
       <option value="3">O2O</option>
       <option value="4">教育</option>
       <option value="5">金融</option>
       <option value="6">游戏</option>
   </select>
</div>

3.上下线部分

点击图片的状态,可以将对应图片进行状态更改操作

最开始的思路有一些问题,只考虑了改变文字内容,实际上此部分也涉及了和后台的交互

使用ng-click直接传参

<button class="btn1" ng-click="changeStatus(msg.id)">{{msg.status | buttonFilter}}</button>

这里必须要针对到对应数组里去找对应参数内容,根据后台文件,将 对应参数传出

//草稿上下线的状态改变
$scope.changeStatus = function (id) {
   // console.log(id);
   if ($scope.upperForm[this.$index].status == 1) {
       $scope.status = 2;
   } else {
       $scope.status = 1;
   }
   $http ({
       method: "put",
       url: "/a/a/u/article/status",
       params: {
           id: id,
           status: $scope.status
       }
   }).then(function success(response) {
       $scope.aaa()
   })

};

接下来计划尽快完成表单验证部分


返回列表 返回列表
评论

    分享到