发表于: 2017-06-15 21:57:46

1 858


今天完成的事情:

1.完成富文本编辑器插件的使用,选择的是百度的ueditor,比较了一些富文本编辑器,发现很多国外的富文本编辑器不支持中文字体的更换,比如angularText,因此还是选择了百度。

代码如下:

angular.module("home",['angularFileUpload', 'ng.ueditor']).controller("personDetail", function($scope, $state, $http, FileUploader, Type, Industry) {

    $scope.mold = Type;

    $scope.trade = Industry;

    //百度编辑器初始化

    $scope._Config = {

        toolbars: [

            [   'undo', //撤销

                'redo', //重做

                '|',

                'bold', //加粗

                'italic', //斜体

                'underline', //下划线

                'strikethrough', //删除线

                'subscript', //下标

                'superscript', //上标

                'blockquote', //引用

                'removeformat', //清除格式

                '|',

                'forecolor', //字体颜色

                'backcolor', //背景色

                'insertorderedlist', //有序列表

                'insertunorderedlist', //无序列表

                'selectall', //全选

                'cleardoc', //清空文档

                '|',

                'emotion', //表情

                'simpleupload', //单图上传

                'link', //超链接

                '|',

                'insertcode', //代码语言

                'fontfamily', //字体

                'fontsize', //字号

                '|',

                'horizontal', //分隔线

                'spechars', //特殊字符

                'time', //时间

                'date', //日期

                'background', //背景

                '|',

                'justifyleft', //居左对齐

                'justifyright', //居右对齐

                'justifycenter', //居中对齐

                'justifyjustify', //两端对齐

                '|',

                'imagenone', //默认

                'imagecenter', //居中

                'lineheight' //行间距

            ]

        ],

        wordCount: false,

        elementPathEnabled: false,

        autoHeightEnabled: false

    };

    var uploader = $scope.uploader = new FileUploader({

        url: "/carrots-admin-ajax/a/u/img/task"

    });

    //过滤器限制只能选择图片

    uploader.filters.push({

        name: 'imageFilter',

        fn: function(item /*{File|FileLikeObject}*/, options) {

            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';

            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;

        }

    });

    //重新选择文件时清除队列中的文件

    $scope.clearItems = function() {

        uploader.clearQueue();

    };

    //回调函数

    uploader.onSuccessItem = function(fileItem, response) {

        console.log( uploader.queue,fileItem, response);

        $scope.statusText = "上传成功";

        $scope.imgUrl = response.data.url;

    };

    uploader.onErrorItem = function(fileItem, response) {

        console.log( uploader.queue,fileItem, response);

        $scope.statusText = "上传失败";

    };

    //表单数据组装

    function myPostData() {

        $scope.postData = {

            title: $scope.title,

            type: $scope.moldSelect,

            status: $scope.btnStatus,

            img: $scope.imgUrl,

            content: $scope.explain,

            url: $scope.jumpUrl,

            industry: $scope.tradeSelect

        };

    }

    //封装请求

    function postFormData(data) {

        $http({

            method: "POST",

            url: "/carrots-admin-ajax/a/u/article",

            params: data,

            headers: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}

        })

            .then(function(response) {

                if(response.data.code === 0) {

                    alert("新增成功");

                    $state.go("main.article");

                }

                else if(response.data.code !== 0) {

                    alert(response.data.message);

                }

            });

    }

    //立即上线

    $scope.onLine = function() {

        if($scope.moldSelect !== 3) {

            $scope.tradeSelect = "";

        }

        $scope.btnStatus = 2;

        myPostData();

        console.log($scope.postData);

        postFormData($scope.postData);

    };

    //存为草稿

    $scope.storeDraft = function() {

        if($scope.moldSelect !== 3) {

            $scope.tradeSelect = "";

        }

        $scope.btnStatus = 1;

        myPostData();

        console.log($scope.postData);

        postFormData($scope.postData);

    };

});

2.学习了ng-message表单验证:

常用的表单验证指令

1. 必填项验证

某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

复制代码 代码如下:

<input type="text" required /> 

2. 最小长度

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}":

复制代码 代码如下:

<input type="text" ng-minlength="5" /> 

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}":

复制代码 代码如下:

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

复制代码 代码如下:

<input type="text" ng-pattern="/[a-zA-Z]/" /> 

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

复制代码 代码如下:

<input type="email" name="email" ng-model="user.email" /> 

6. 数字

验证输入内容是否是数字,将input的类型设置为number:

复制代码 代码如下:

<input type="number" name="age" ng-model="user.age" /> 

7. URL

验证输入内容是否是URL,将input的类型设置为 url:

复制代码 代码如下:

<input type="url" name="homepage" ng-model="user.facebook_url" />


明天计划的事情:

完善整个后台项目,包括表单验证,css样式的修改,登录退出的小功能,尽量做到完善。

遇到的问题:

暂无

收获:

富文本编辑器的使用及ng-message进行表单验证




返回列表 返回列表
评论

    分享到