AngularJs初体验

面包屑导航的思路分析

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>