面包屑导航的思路分析
1.面包屑常用作于树形结构数据的显示(首页/家用电器/电视机)
实例表格数据
(id parent_id name)
2.思路解析:
步骤一:
设置除了等级一(首页)的对应的实体
entity_1(家用电器)
entity_2(电视机)
步骤二:
等级划分(点击查询下级会根据父节ID点查询节点数据):
一级:(首页)
entity_1 = null;
entity_2 = null;
二级:
entity_1 = entity(首页);
三级:
entity_2 = entity(家用电器);
步骤三:设置等级方法
$scope.grade = 1;
$scope.setGrade = function(value){ //此方法起到点击下一级,等级递增的作用
$scope.grade = value;
}
$scope.selectList = function(p_entity){
if($scope.grade == 1){
$scope.entity_1 = null;
$scope.entity_2 = null;
}
if($scope.grade == 2){
$scope.entity_1 = p_entity;
$scope.entity_2 = null;
}
if($scope.grade == 3){
$scope.entity_2 = p_entity;
}
//重新根据父节点ID查询对应子节点
$scope.findByParentId(p_entity.id);
}
步骤四:设置点击下一级按钮(等级递增,用当前对象赋值给对应的下一等级对象,并执行查询)
<button ng-click="setGrade(grade+1);selectList(entity)">查询下一级</button>
步骤五:设置面包屑标签(将等级设为对应标签的等级,并设置要查询的父id对应的子节点)(如果点击家用电器,那么就是首页id的对应的子节点)
<ol class="breadcrumb">
<li>
<a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a>
</li>
<li>
<a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a>
</li>
<li>
<a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a>
</li>
</ol>
select2的数据交互
(多选):
显示数据格式:$
scope.specList = {data:[{id:1,text:’手机’},{id:2,name:’电脑’}]};
回显数据格式:$
scope.entity.specIds = JSON.parse([{id:1,text:’手机’},{id:2,name:’电脑’}]);
<input select2 select2-model="entity.specIds" config="specList" multiple placeholder="规格品牌(可多选)" class="form-control">
(单选):
显示数据:(只需要加载一次 ng-init=”“)
回显数据:(与多选不同点ng-model)根据findOne()查询自动比对回显,查询出来的typeId为id即可,不需要固定格式
AngularJs实现文件上传
service:
app.service("uploadService",function($http){
this.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
return $http({
method:'POST',
url:"../upload.do",
data: formData,
headers: {'Content-Type':undefined},
transformRequest: angular.identity
});
}
});
controller:
$scope.uploadFile=function(){
uploadService.uploadFile().success(function(response) {
if(response.success){//如果上传成功,取出url
$scope.image_entity.url=response.message;//设置文件地址
}else{
alert(response.message);
}
}).error(function() {
alert("上传发生错误");
});
};
html:
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>颜色</td>
<td><input class="form-control" placeholder="颜色" ng-model="image_entity.color"> </td>
</tr>
<tr>
<td>商品图片</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file" />
<button class="btn btn-primary" type="button" ng-click="uploadFile()">
上传
</button>
</td>
<td>
<img src="{{image_entity.url}}" width="200px" height="200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
AngularJs过滤器的用法
案例:过滤对高亮显示字段中html的信任
1.创建过滤器
var app = angular.module("pinyougou",[]);
//定义过滤器,过滤对html内容的信任
app.filter("trustHtml",["$sce",function($sce){
return function(data){//data 需要信任的html文本
return $sce.trustAsHtml(data); //返回信任后的html文本
}
}]);
2.在页面中使用过滤器
<div class="attr" ng-bind-html="item.title | trustHtml">
</div>