发表于: 2017-06-04 20:55:58
2 1052
今天完成的事情:
1.学了如何使用过滤器进行日期格式的转换,我昨天是用原生写的,今天重写了一遍:
<tr ng-repeat="x in records">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.type | customType }}</td>
<td style="width: 120px">{{ x.createAt | date: "yyyy-MM-dd HH:mm:ss" }}</td>
<td style="width: 120px">{{ x.updateAt | date: "yyyy-MM-dd HH:mm:ss" }}</td>
<td>{{ x.author }}</td>
<td>{{ x.status | customData }}</td>
<td><span>{{ x.status | customHandle }}</span><span class="mar_span">编辑</span><span>删除</span></td>
</tr>
2.学会了如何自定义过滤器:
//自定义过滤器
mainApp.filter("customType", function() {
return function(number) {
if(number === 0) {
number = "首页Banner";
return number;
}
else if(number === 1) {
number = "找职位Banner";
return number;
}
else if(number === 2) {
number = "找精英Banner";
return number;
}
else if(number === 3) {
number = "行业大图";
return number;
}
}
});
mainApp.filter("customData", function() {
return function(num) {
if(num === 1) {
num = "草稿";
return num;
}
else if(num === 2) {
num = "上线";
return num;
}
}
});
mainApp.filter("customHandle", function() {
return function(a) {
if(a === 1) {
a = "上线";
return a;
}
else if(a === 2) {
a = "下线";
return a;
}
}
});
3.学习了一波详细的自定义过滤器的方法:
自定义过滤器,不带参数:
//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});
大致这样使用:
{{777 | ordinal}}
过滤 带参数:
//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置,索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置,索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
});
过滤,带多个参数,做多件事:
var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '¥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
});
明天计划的事情:
开始任务8的编写
遇到的问题:
state.go传进来的数值刷新后就没有了
收获:
过滤器的使用。
评论