Angular实现双向折叠列表组件的示例代码88bifa必发唯一官网

<div id="container">
  <div id="summary"></div>
  <div id="buttons">
    <div id="left" *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Right" (click)="_onHandleLeft($event)">《</div>
    <div id="right"> *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Left" (click)="_onHandleLeft($event)">》</div>
  </div>
  <div id="detail"></div>
</div>

10.获取页面元素

对应页面html中:

<div id=”itemsDiv”></div>

对应js页面中:

var itemsDov = document.getElementById(“itemsDiv“);

 itemsDov.style.width = $scope.itemsData.length * 360 +”px”;

  1. 双向折叠可以用“3种页面状态去控制2个按钮”来实现
  2. enum在Angular Component的template中用到时,需要在compnent
    class中添加它的引用
  3. 控制元素样式有很多方法,要选择合适的方法
  4. CSS定位中left和margin-left虽然都能把元素推向左边,但是left保留原来文档流位置,margin-left不保留原来文档流位置。

三、固定定位 fixed

特点:

a、元素position被设置为fixed时,这个元素就被固定住了,被固定的元素不会随着滚动条的拖动而改变位置,在视野中,元素的位置是不会改变的。

b、定位的是距离浏览器的位置,始终不变。

c 、常用于页面上的返回顶部按钮

{ position:fixed; top:30px;  left:160px; width: 60px;  height:60px;  }

对于控制button的样式,我们需要控制三个样式:”left button”、”right
button”还有“buttons”。能够想到有三种方案:

二、相对定位 relative

特点:

a.相对定位指的是它原本在文档流中的位置而进行的偏移

b.使用相对定位时,无论是否进行移动,元素仍然占据原来的空间

c.一直相对的是它自身的初始位置

z-index
调整堆叠顺序,
定位元素沿Z轴的位置,为正数则离用户更近,为负数,则离用户更远。

特点:拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面,更靠近用户,可有负值,仅在定位元素上有效。z-index:1;靠近用户在前,z-index:-1远离用户,在后。

export enum CollapseExpandState {
  Middle = 1,
  Left,
  Right
}

12、浮动 float

概念:

设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。

包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素。

这样的话,我们需要从元素的角度出发,只需要3个元素变量,从而改变元素上的className即可。但是这样做有个隐患,注意到我们是用的ngIf来控制left和right在不同状态下是否存在,因为每一次事件处理都需要对三个元素的样式进行赋值,但是如果某个页面状态下ngIf为false从而元素不存在,那么就会报“Null
Pointer”的错误,所以如果所引用的元素受到了ngIf的控制,不确定是否一定存在的情况下,要慎用该方法为元素赋予样式。

3.angular   ui-sref-active

ui-sref-active=”select”

例如

<li ui-sref-active=”select”
ui-sref=”main”><span>首页</span></li>

//这个意思是说如果当前点击的路由是main的话,首先点击这个路由会跳转到main的页面,

 //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称

<li ui-sref-active=”select”
ui-sref=”search”><span>附近</span></li>

也就是说,在Angular2的template中无法识别定义的枚举类型CollapseExpandState,这是因为你写的Angular
Component的template模板的执行环境是你定义的component
class,但是在class中并没有关于CollapseExpandState枚举的任何引用,所以Angular在为你的component生成模板的时候认为CollapseExpandState是undefined的。知道了原因,解决方案就很容易了,只需要在component
class中加入这个枚举的引用即可:

1.angular  ng-repeat  orderBy 最后一个desc参数一般是true和false,是否逆序,默认是false

<li ng-repeat=”item in data | orderBy:sort:desc”></li>

js中实现:

$scope.sort=’age’;

$scope.data=[{

        name:’mary’,

        age:24,

        sex:’female’,

        height:’170cm’,

        description:’Hi,everyBody,Nice to meet you’

    },    {

        name:’Jackey’,

        age:28,

        sex:’male’,

        height:’187cm’,

        description:’Hi,all,Nice to meet you’

    }];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

absolute应用—垂直居中设置,margin上下auto

{ position:absolute;  width:100px; height:50px;  margin:auto 0; top:0;
bottom:0; }

分别在buttons、left和right上用模板变量,然后在class中定义:

6.angular ng-controller

绑定应用控制器,为$scope增强

抽离的nav.html中 ,设定ng-controller = “asideCtrl”,

<nav ng-controller=”asideCtrl”>

  <ul class=”nav”>

     <li class=”one-flag” ng-repeat=”item in
permissionList”>

  </ul>

</nav>

,然后对应在应用中main.js中

angular.module(‘app’)

.controller(‘AppCtrl’, [‘$scope’, ‘$localStorage’, ‘$window’,
‘LocalCache’, ‘$state’, ‘$rootScope’,’AgreeConstant’, function($scope,
$localStorage, $window, LocalCache, $state, $rootScope,AgreeConstant) {

.controller(“asideCtrl”, [‘$scope’, ‘LocalCache’,

      function($scope, LocalCache) {

        $scope.permissionList =
angular.fromJson(LocalCache.getSession(“permissionJson”));

        };

      }

    ])

}

至此,nav.html就可以使用asideCtrl控制器中获取的$scope.permissionList
的值进行页面渲染。

显然buttons是占据了文档流的位置的,如果这时候我们用relative定位buttpms,并且设置left的值为-74px(注意到left为负数就会把元素往左推):

一、absolute绝对定位:

特点:

a.会从文档流中脱离,不受其他元素影响,定位是绝对的,绝对定位的元素在文档流中没有位置,从文档流中脱离了出来,会面的元素会填充掉它原来的位置。

b.定位位置相对于第一个具有定位属性(即:position为relative或者为absolute属性)的祖先元素。

当给元素设置绝对定位值时:

   
 该元素会延着DOM树向上查找,直到找到一个具有定位属性的祖先元素,则定位会相对于该元素。

     若祖先元素都没有定位属性,则会相对于body体进行定位

c.绝对定位的高级特性:

 
 具有自动伸缩功能,将width设置为auto(或不设置,默认为auto),绝对定位元素会根据其left和right
自定伸缩其大小。例如:

注意:left、right必须要相等,且不超过其相对元素减去该绝对定位元素width的一半

88bifa必发唯一官网 1

块级元素-block element

每个块级元素默认占一行高度,一行内增加一个块级元素后,一般无法添加其他元素(元素浮动后除外),两个块级元素连续编辑时,会在页面自动换行显示,块级元素一般可嵌套块级元素或行内元素,宽度缺省为100%,除非设定宽度。

块级元素常见:address blockquote块引用、center居中对齐块
、dir-目录列表  div   dl-定义列表

form-交互表单、 h-标题、    hr-水平分界线、menu-菜单列表 、ol-有序列表
 ul–无序列表 p–段落

pre–格式化文本  table–表格

为了II中的尴尬,我们采用在HTML元素上对class进行直接赋值的方式,但是需要借用插值表达式{{}}。我们在css中用class的形式定义好样式,并且在compoennt
class中定义三个字符串变量记录className,然后在事件处理函数中把相应的className赋予变量即可。这样我们就不用担心元素是否存在而导致的空指针了。

浮动元素的特性:

不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height
,
   因此float常用作制作横向排列的菜单,可以设置大小并且横向排列。

88bifa必发唯一官网 2

4.angular ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

有三种方法:

1、通过$scope绑定(不推荐)

2、通过对象数组绑定

3、通过key/value键值对绑定

第1种,通过$scope绑定:

function ctrl($scope) {   

$scope.className =”selected”;  }

对应的页面:<div class=”{{className}}”></div>

第2种, 通过对象数组绑定:

function ctrl($scope) {   

$scope.isSelected =true;  

}  

对应的页面:<div
ng-class=”{true:’selected’,false:’unselected’}[isSelected]”></div>
 
 当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。

第3种, 通过key/value键值对绑定:

function ctrl($scope) {   

$scope.isA =true;  

$scope.isB =false;  

$scope.isC =false;  

}  

对应的页面<div ng-class=”{‘A’:isA,’B’:isB,’C’:isC}”></div>  
 当isA为true时,增加A样式;当isB为true时,增加B样式;当isC为true时,增加C样式。

例如:<i
ng-class=”getIconClass(two)”></i>函数返回的是一个字符串,就是动态添加css属性

我们还看到有“<”和“>”两组按钮,这就是我们要做的“双向折叠组件”。点击左边的“<”,Summary
Panel折叠起来,Detail Panel铺满整个页面,我们把它记作“Left
State”,如下图:

2.angular    ui-sref使用

具体用法:<a
ui-sref=”XXXX”></a>,其中XXXX是路由的$state中名为“XXXX”的state

<a
ui-sref=”app.system.template_bench({pageId:item.pageId,isDefault:resultData.length})”></a>

路由中的配置:

.state(‘app.system.template_bench’, {

            url: ‘/template_bench/:pageId/:isDefault’,

            templateUrl: ‘tpl/system/template_bench.html’,

            controller: ‘template_bench’,

当JavaScript重新生成网页时,它会查找$state中名为“app.system.template_bench”的state,读取这个state的url,然后在a标签里生成href=”url”,

结果为:<a ui-sref=”XXXX” href=”#/XXXX.html”></a>

(1)假如动态绑定:

<li repeat=”item in items”>

<a
ui-sref=”{{item.statePage}}”>{{item.state}}</a>这样是错误的,

ui-sref不支持动态绑定,这样的代码会报错。sref中你只能使用state名,顶多加点参数。

(2)携带参数的ui-sref  :

ui-sref=”app.system.template_bench({pageId:item.pageId,isDefault:resultData.length})”对应路由中的参数配置,其实通$state.go()

this.left.nativeElement.className = "XXXXX";

8.angular json转换

var data =
‘{“procotol”:”HTTP”,”host”:”‘+activateUrl+'”,”encrypt”:false,”body”:{“requestType”:”PUT”,”tag”:”‘+activateUrl+'”,”upJson”:{“activationCode”:”‘+$scope.activeCode.text+'”}}}’;
//=====json字符串=====

angular.fromJson(data);  //===执行此操作转换成json对象

angualr.toJson(“json字符串”)//====执行此操作把json对象转换成json字符串

我们通过枚举状态来控制了两个buttons是否在恰当的页面状态显示与否,但是即使是同一个buttons,在不同的页面状态下所用到的样式也会不同,这里的样式其实最主要的就是位置了。我们先来考虑如何去控制button的样式,再来考虑如何去正确定位不同页面状态下button的位置。

9.函数向上取整-Math.ceil

Math.ceil(3.5)==》向上取整4

88bifa必发唯一官网 3

内联元素-inline element:

和其他元素都在一行上,

高、行高、内边距、外边距不可改变,width、height无效,可设置line-height

宽度就是它的文字或者图片的宽度,不可改变,宽度随内容的变化而变化

margin只有 margin-left,margin-right有效,上下无效

padding只有padding-left,padding-right有效,上下无效

III、 用class=”{{}}”

11.元素定位

1.页面的总体布局是一个Summary的div,两个箭头buttons,一个Detail的div。

5.angular ng-include 和 data-ng-include

都是外部引入html页面,data-ng-include是h5的规范化写法,没区别

一定注意双引号内包含单引号

<div data-ng-include=” ‘tpl/blocks/nav.html’ “></div>

<div ng-include=”‘tpl/common/modal.html'”></div>

ng-include写路径方式:

(1)<ng-include src=”‘views/sidepanel.html'”></ng-include>

  (2)  <div ng-include=”‘views/sidepanel.html'”></div>
 一般静态加载某个页面

  (3)  <div ng-include
src=”‘views/sidepanel.html'”></div>动态的加载一般采用第三种方式

2.页面总共有三种state:“Middle”、“Left”、“Right”,有两个button:“<”和“>”,也就是两个button去控制三个state。

7.angular ng-click

ng-click=”reload(m.blockContentId)” 方法

ng-if=”item.pageName”变量

ng-model=”map.pageName”变量

因此它需要用boolean去控制,每一种样式需要一个boolean去控制,left和right各有两种样式,buttons有三种样式,这样就需要用5个boolean去控制,略显麻烦。

absolute应用—左右居中设置,margin左右auto

(1)左右居中,定位元素会呈现居中状态,margin:0 auto +定宽+
左右left、right相等:

{ position:absolute;  left:0;  right:0;  width:50px;  margin:0 auto;}

(2)定位元素占满父元素的宽度:

{ position:absolute;  left:0;  right:0 }

(3)优先取left值作为定位标识,结合width宽度显示

{ position:absolute;  left:0;  right:0; width:50px;  }

您可能感兴趣的文章:

浮动元素展示规则:

a、浮动元素在float的时候,其margin不会超过包含块的padding
,默认正常情况下不会超出,但也可控制浮动元素的margin为负值超出,碰撞到包含块的padding停止。

b、如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。

c、包含块元素的宽度足够大,两个元素一个向左float,一个向右float,互相无交集,

     
如果父包含块的宽度小于两个浮动元素的宽度总和,一个左float,一个右float,那么后面的元素将会向下浮动,其顶端是前面浮动框的底端。

在Summary Panel折叠状态下,点击“>”,又回到“Middle
State”。点击“>”,Detail Panel折叠起来,Summary
Panel铺满整个页面,我们把它记作“Right State”,如下图:

I、用ng-class

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  left: -74px;
}

我们采用flex布局,从左到右依次排列Summary Panel, buttons和Detail
Panel。我们希望Buttons向左移,但是空出的位置被Detail
Panel来填充。首先来看一下不设样式的效果图:

页面的结构如下,并且通过一个变量_collapseExpandState去控制“left”和“right”两个button,具体为“<”会在页面状态为“Middle”和“Right”的情况下出现,“>”会在页面状态为“Middle”和“Left”状态下出现,从需求图中即可得知:

考虑完如何控制样式,下面我们进入CSS样式的讨论,这里其实主要考虑的就是位置。

TypeError: Cannot read property ‘Middle’ of undefined

88bifa必发唯一官网 4

发现如果用left的话,buttons原来的文档流位置依然存在,只是buttons相对于原来的位置移动了一定的位移。

它和left不同之处在于,left会留住原来的文档流位置,但是用margin-left原来的文档流位置会消失,而由后面的元素补充过来,而我们想要的效果,正好是用margin-left来实现的。

II、 用ElementRef.nativeElement.className

在处理函数中这样去给class赋值从而改变样式:

最近在做一个双向折叠组件,如下图所示,页面是分为两组,左边页面是Summary
Panel,主要是一组列表,右边页面是Detail
Panel,展示左边列表中某一项的具体信息,我们把它记作“Middle State”。

总结一下,从这个案例中我们学习到了:

这里在angular的template中用到了枚举,遭遇了一些麻烦,如果我们按上述定义了枚举,并且在Angular
Component的template中用了枚举,我们会得到以下的错误提示:

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  margin-left: -74px;
}

88bifa必发唯一官网 5

ng-class一般的用法如下:

我们通过以上的需求分析可知,

如果我们用margin-left来设置呢:

效果图为:

效果图为:

所以用CSS定位的时候,要明白left和margin-left的区别,从而选择正确的方式来定位。

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
@component(...)
export class ContainerWidget {
  public CollpaseExpandState: any = CollapseExpandState;
}
@ViewChild("buttons") buttons: ElementRef;
@ViewChild("left") left: ElementRef;
@ViewChild("right") right: ElementRef;

88bifa必发唯一官网 6

因此我们需要定义一个枚举来记录页面的三种状态(注意,定义枚举要用export导出,否则后面会出错)