AngularJs按钮的显示隐藏和面包屑功能的实现

AngularJs控按钮的显示隐藏和面包屑功能的实现

控制“查询下级”显隐

思路:用一个变量记录当前显示的是第几级 grade

第一步:在js中添加一个变量

$scope.grade=1;  //此变量用来记录当前页面显示数据的层级默认显示是第一级

第二步:添加一个方法。更改grade的值                        

//点击查询下级的方法$scope.setGrade=function(grade){       $scope.grade=grade;}

第三步:使用ng-if控制显隐

<span ng-if="grade!=3">                            
<button type="button"
       ng-click="setGrade(grade+1);findByParentId(pojo.id)"
       class="btn bg-olive btn-xs">查询下级
</button>
</span>
面包屑的原路返回
<ol class="breadcrumb">
   <li>
       <a style="cursor: pointer;" ng-click="setGrade(1,null);findByParentId(0)">顶级分类列表</a>
   </li>
   <li ng-if="entity1 != null">
       <a style="cursor: pointer;" ng-click="setGrade(2,entity1);findByParentId(entity1.id)">{{entity1.name}}</a>
   </li>
   <li ng-if="entity2 != null">
       <a href="#">{{entity2.name}}</a>
   </li>
</ol>
<span ng-if="grade!=3">                            
<button type="button"
ng-click="setGrade(grade+1,pojo);findByParentId(pojo.id)"
class="btn bg-olive btn-xs">查询下级</button>
</span>
$scope.grade = 1;// 此变量用来记录当前页面显示数据的层级 默认显示是第一级
$scope.entity1 = null;//   代表的是面包屑上显示的一级分类对象
$scope.entity2 = null;//   代表的是面包屑上显示的二级分类对象

$scope.parentId = 0;  //表示即将保存的对象的父id

$scope.setGrade = function (grade, pojo) {
   $scope.grade = grade;
   if ($scope.grade == 1) {
       $scope.entity1 = null;//   代表的是面包屑上显示的一级分类对象
       $scope.entity2 = null;//   代表的是面包屑上显示的二级分类对象
       $scope.parentId = 0;
   }
   if ($scope.grade == 2) {//grade等于2 赋值
       $scope.entity1 = pojo;//   代表的是面包屑上显示的一级分类对象
       $scope.entity2 = null;//   代表的是面包屑上显示的二级分类对象
       $scope.parentId = $scope.entity1.id;
   }
   if ($scope.grade == 3) {//grade等于3 赋值
       $scope.entity2 = pojo;//   代表的是面包屑上显示的二级分类对象
       $scope.parentId = $scope.entity2.id;
   }
}
多级菜单的保存:

向即将保存的entity中追加一个parentId属性并赋值

    // 保存
   $scope.save = function () {
   // 保存或修改时需要对entity的parentId赋值
 $scope.entity['parentId'] = $scope.parentId;  //追加属性并且赋值
 // $scope.entity.parentId = $scope.parentId;
       var serviceObject;//服务层对象
       if ($scope.entity.id != null) {//如果有ID
           serviceObject = itemCatService.update($scope.entity); //修改
       } else {
           serviceObject = itemCatService.add($scope.entity);//增加
       }
       serviceObject.success(
           function (response) {
               if (response.success) {
                   //重新查询
    //  $scope.reloadList();//重新加载
                   $scope.findByParentId($scope.parentId);
               } else {
                   alert(response.message);
               }
           }
       );
   }
<table class="table table-bordered table-striped" width="800px">
   <tr>
       <td>上级商品分类</td>
       <td>
           <ol class="breadcrumb">
               <li>
                   <a style="cursor: pointer;">顶级分类列表</a>
               </li>
               <li ng-if="entity1 != null">
                   <a style="cursor: pointer;">{{entity1.name}}</a>
               </li>
               <li ng-if="entity2 != null">
                   <a href="#">{{entity2.name}}</a>
               </li>
           </ol>
       </td>
   </tr>
   <tr>
       <td>商品分类名称</td>
       <td><input ng-model="entity.name" class="form-control" placeholder="商品分类名称"></td>
   </tr>
   <tr>
       <td>类型模板</td>
       <td>
           <select class="form-control" ng-model="entity.typeId"
                   ng-options="tt.id as tt.name for tt in typeTemplateList"
                  >
           </select>
       </td>
   </tr>
</table>


发表评论