发表于: 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进行表单验证
评论