AngularJS(十四)$location服务，ng-check的应用

最新推荐文章于 2019-11-22 14:24:52 发布

houysx

最新推荐文章于 2019-11-22 14:24:52 发布

阅读量480

点赞数

分类专栏： 6AnglarJS

本文链接：https://blog.youkuaiyun.com/houysx/article/details/80459583

版权

6AnglarJS 专栏收录该内容

15 篇文章

订阅专栏

一、回显三级分类列表的小技巧

1、分页查询商品显示
这里写图片描述

将三级分类列表全部查出放入数组中

// 查询所有三级目录的方法、将其以id为索引，name为值，放入数组中
    $scope.findItemCatList=function(){

        itemCatService.findAll().success(function(data) {
            //初始化数组
            $scope.itemCatList =[{}]; 
            //循环存值  
            for(var i=0;i<data.length;i++){
                $scope.itemCatList[data[i].id]=data[i].name;
            }

        });

    };

页面代码

    <!--数据列表-->
    <table id="dataList"
        class="table table-bordered table-striped table-hover dataTable">
        <thead>
            <tr>
                <th class="" style="padding-right: 0px"><input
                    ng-click="selAll()" id="selall" type="checkbox"
                    class="icheckbox_square-blue"></th>
                <th class="sorting_asc">商品ID</th>
                <th class="sorting">商品名称</th>
                <th class="sorting">商品价格</th>
                <th class="sorting">一级分类</th>
                <th class="sorting">二级分类</th>
                <th class="sorting">三级分类</th>
                <th class="sorting">状态</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="entity in entitys">
                <td><input ng-click="updateSelection($event,entity.tbGoods.id)"
                    type="checkbox"></td>
                <td>{{entity.tbGoods.id}}</td>
                <td>{{entity.tbGoods.goodsName}}</td>
                <td>{{entity.tbGoods.price}}</td>
                <!-- 从分类列表的数组中获取三级分类列表列表 -->
                <td>{{itemCatList[entity.tbGoods.category1Id]}}</td>
                <td>{{itemCatList[entity.tbGoods.category2Id]}}</td>
                <td>{{itemCatList[entity.tbGoods.category3Id]}}</td>
                <td><span>{{state[entity.tbGoods.auditStatus]}}</span></td>
                <td class="text-center">
                    <button type="button" ng-click="toEditPage(entity.tbGoods.id)"
                        class="btn bg-olive btn-xs">修改</button>
                </td>
            </tr>
        </tbody>
    </table>

二、点击修改，跳转到编辑页面，并且传递商品id参数

//跳转到修改页面，并携带id
    $scope.toEditPage = function(id) {
        location.href='goods_edit.html?id='+id;
    };

编辑页面引入服务

//定义品优购模块
var app=angular.module('shop',[]);
//引入$location路由配置（该配置也可以省略，在上一步中，在参数列表前，用#号代替 即#？id='id'）
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

编辑页面初始化，查询回显商品

<body ng-app="shop" ng-controller="goodsController"
    ng-init="selectOne();">```

控制器中通过$location服务获取需要回显商品的id，并调用服层，查询该商品

//在控制器中，引入$location服务 
app.controller('goodsController', function($scope, goodsService,
        itemCatService,$location) {

//在方法中通过$location服务，查询该商品进行回显
// 通过id查询商品的方法
$scope.selectOne = function() {
    // 通过$location服务，获取跳转携带的参数id
    var id = $location.search()["id"];
    // 只有id存在执行后续代码
    if (typeof (id) == 'undefined') {
        return;
    }
    // 通过id查询商品
    goodsService.selectOne(id).success(
            function(data) {
                $scope.entity = data;
                // 获取tbGoodsDesc对象
                var tbGoodsDesc = $scope.entity.tbGoodsDesc;
                // 读取富文本框
                editor.html(tbGoodsDesc.introduction);
                // 读取图片
                $scope.entity.tbGoodsDesc.itemImages = JSON
                        .parse($scope.entity.tbGoodsDesc.itemImages);
                // 解析扩展属性
                $scope.entity.tbGoodsDesc.customAttributeItems = JSON
                        .parse($scope.entity.tbGoodsDesc.customAttributeItems);
                // 解析规格属性
                $scope.entity.tbGoodsDesc.specificationItems = JSON
                        .parse($scope.entity.tbGoodsDesc.specificationItems);

                // 解析spec规格属性
                parseSpec();
            })

};

// 解析spec属性规格属性的方法
parseSpec = function() {
    for (var i = 0; i < $scope.entity.itemList.length; i++) {
        $scope.entity.itemList[i].spec = JSON
                .parse($scope.entity.itemList[i].spec);
    }

};



}

三、checkbox、选项的回显

页面

<div ng-repeat="pojo in specList">

                <div class="col-md-2 title">{{pojo.text}}</div>
                <div class="col-md-10 data">
            <!-- 
                ng-repeat="option in pojo.options" : 循环对应规格选项列表
                {{option.optionName}} ： 显示每个选项的名称
                ng-click：点击调用方法
                修改规格选项的属性
                updateSpecAttribute($event,pojo.text,option.optionName);
                通过规格选项对象，动态创建sku列表
                createSKUTable();
                ng-checked="checkAttributeValue(pojo.text,option.optionName)":
                ng-ckecked：如果值有true，为选中
                                        值为false，     不选中
                调用方法checkAttributeValue，将选项名称pojo.text，和选项的值option.optionName传入，
                                                             判断是否选中，返回布尔值
            -->
                    <span ng-repeat="option in pojo.options"> <input
                        ng-checked="checkAttributeValue(pojo.text,option.optionName)"
                        ng-click="updateSpecAttribute($event,pojo.text,option.optionName);
                                  createSKUTable();"
                        type="checkbox"> {{option.optionName}}
                    </span>
                </div>
            </div>

控制器方法


//读取回显数据，选中规格属性
$scope.checkAttributeValue=function(specName,optionName){
    var specItems =$scope.entity.tbGoodsDesc.specificationItems;
    //遍历规格
    for(var i =0;i<specItems.length;i++){
        //判断规格数组中的规格名称，和该checkbox的规格名称相同
        if(specName==specItems[i].attributeName){
            //判断该规格选项值的数组中是否有该值，如果有返回true，选中
            if(specItems[i].attributeValue.indexOf(optionName)>=0){
                return true;
            };
        };

    };
    //否则，不选中
    return false;
};