zoukankan      html  css  js  c++  java
  • angularJsUIbootstrap系列教程2(According)

      废话不说上代码  

    angular.module('MyApp', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])
            .controller('accordionCtrl', ['$scope', function($scope) {
                $scope.oneAtATime = true;
    
                $scope.groups = [{
                    title: 'Dynamic Group Header - 1',
                    content: 'Dynamic Group Body - 1'
                }, {
                    title: 'Dynamic Group Header - 2',
                    content: 'Dynamic Group Body - 2'
                }];
    
                $scope.items = ['Item 1', 'Item 2', 'Item 3'];
    
                $scope.addItem = function() {
                    var newItemNo = $scope.items.length + 1;
                    $scope.items.push('Item ' + newItemNo);
                };
    
                $scope.status = {
                    isFirstOpen: true,
                    isFirstDisabled: false
                };
            }])

     

    <p>
            <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
            <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
        </p>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="oneAtATime"> Open only one at a time
            </label>
        </div>
        <uib-accordion close-others="oneAtATime">
            <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                This content is straight in the template.
            </uib-accordion-group>
            <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                {{group.content}}
            </uib-accordion-group>
            <uib-accordion-group heading="Dynamic Body Content">
                <p>The body of the uib-accordion group grows to fit the contents</p>
                <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
            </uib-accordion-group>
            <uib-accordion-group heading="Delete account" panel-class="panel-danger">
                <p>Please, to delete your account, click the button below</p>
                <button class="btn btn-danger">Delete</button>
            </uib-accordion-group>
            <uib-accordion-group is-open="status.open">
                <uib-accordion-heading>
                    I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                </uib-accordion-heading>
                This is just some content to illustrate fancy headings.
            </uib-accordion-group>
        </uib-accordion>

      讲解一下,首先是模块的依赖要导入进来,这点要注意三个依赖都需要

      然后就是Accordion 分为两个部分

        1.uib-accordion

          close-others:支持表达式和常量(默认:true), 只允许打开一个?

          template-url:(默认template/accordion/accordion.html)模板地址

        2.uib-accordion-group

          heading : 默认(空)

          is-open:支持表达式,并且可$watch(默认:false)

          is-disabled:支持表达式,并且可$watch(默认:false)

          panel-class : 可$watch(默认:panel-default

          template-url : (默认:uib/template/accordion/accordion-group.html

  • 相关阅读:
    GitLab 介绍
    git 标签
    git 分支
    git 仓库 撤销提交 git reset and 查看本地历史操作 git reflog
    git 仓库 回退功能 git checkout
    python 并发编程 多进程 练习题
    git 命令 查看历史提交 git log
    git 命令 git diff 查看 Git 区域文件的具体改动
    POJ 2608
    POJ 2610
  • 原文地址:https://www.cnblogs.com/HeJason/p/5316075.html
Copyright © 2011-2022 走看看