ui-bootstrap-tpls 中文现在还不全的啊~,组件太多了,有空就更新

贺乐意

2023-12-01

UI Bootstrap,用angular打造的bootstrap组件.

开始

依赖:

angularJS
angular-animate
Bootstrap Css

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>

配置:

angular.module('myModule', ['ui.bootstrap']);

手风琴--Accordion (ui.bootstrap.accordion)

手风琴提供一个项目列表,通过点击条目的标题来使主体内容折叠或展开.

官网上的例子：

html:

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <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="Custom template" template-url="group-template.html">
      Hello
    </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>
</div>

js:

angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', 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
  };
});

一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
<span style="white-space:pre">	</span>.active{background:red}
</style>


</head>
<body>


<div ng-app="myApp" ng-controller="AccordionDemoCtrl" >
<span style="white-space:pre">	</span>  <uib-accordion >
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>


<span style="white-space:pre">	</span> <uib-accordion-group heading="elset">
      <p>Please, to delete your account, click the button below</p>
    </uib-accordion-group>
  </uib-accordion>
</div>


<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {


  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

});

</script>
</body>
</html>

uib-accordion 设置

1:"close-others":true/false.一个折叠打开的时候,其他折叠关闭,默认为"true".

<uib-accordion close-others="false">

2:"template-url": 指定模板地址

<uib-accordion template-url="setting/setting.html" >

uib-accordion-group设置

1:"heading":设置折叠可点击的头部

 <uib-accordion-group heading="Dynamic Body Content">

2:"is-disabled": true/false 默认"false",是否禁用折叠

<uib-accordion-group heading="elset" is-disabled="true" >

3:"is-open":true/false 默认"false",折叠是否展开

<uib-accordion-group heading="elset" is-open="true" >

4:"panel-class":给折叠设置样式类

 <uib-accordion-group heading="elset" panel-class="active">

5: "template-url":指定模板地址

<uib-accordion-group heading="elset" template-url="tl.html">

警告--Alert (ui.bootstrap.alert)

官网上的例子

html

<div ng-controller="AlertDemoCtrl">
  <script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
      <div ng-transclude></div>
    </div>
  </script>

  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AlertDemoCtrl" >
   <script type="text/ng-template" id="alert.html">
    <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
      <div ng-transclude></div>
    </div>
  </script>
  <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
  <uib-alert template-url="alert.html">A happy alert!</uib-alert>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];
  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  }
  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

</script>
</body>
</html>

uib-alert设置

1:"close":显示关闭按钮.

uib-alert  close="closeAlert($index)">

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };

2:"dismiss-on-timeout":设置超时时间后警告自动关闭,单位毫秒.这个属性需要关闭属性的存在.

 <uib-alert  close="closeAlert($index)" dismiss-on-timeout='1000'>

3:"template-url":指定模板地址

 <uib-alert template-url="alert.html">A happy顶顶顶顶 alert!</uib-alert>

4:"type":success/danger/info/warning.设置警告类型

<uib-alert  type="danger" >

按钮--Buttons (ui.bootstrap.buttons)

通过给按钮添加属性"uib-btn-checkbox"或者"uib-btn-radio" 我们可以让按钮变成一组复选框或者一组单选按钮.

一个综合例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
	
	<div ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>Model: {{checkModel}}</pre>
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
    </div>
    <h4>Radio & Uncheckable Radio</h4>
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
    <div class="btn-group">
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
    </div>
    <div>
        <button class="btn btn-default" ng-click="uncheckable = !uncheckable">
            Toggle uncheckable
        </button>
    </div>
</div>
   
</div>

<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});

</script>



</body>
</html>

多选按钮例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">	
	<div ng-controller="ButtonsCtrl">
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
    </div>
</div>  
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('ButtonsCtrl', function ($scope) {
  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});
</script>
</body>
</html>

ui-btn-checkbox 设置

1:"ng-model":设置按钮默认选中状态.

<label class="btn btn-primary" ng-model="true" uib-btn-checkbox >Left</label>

2:"btn-checkbox-true"/"btn-checkbox-false":根据按钮是否选中来设定值

<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle</button>

单选按钮例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
	.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp">
	
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);

</script>



</body>
</html>

uib-btn-radio 设置

1"ng-model":所有单选按钮都应该给相同的名称

<label class="btn btn-primary" ng-model="radioModel" >Left</label>
<label class="btn btn-primary" ng-model="radioModel">Middle</label>
<label class="btn btn-primary" ng-model="radioModel">Right</label>

2:"uib-btn-radio":给按钮设定值

<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>

折叠--Collapse (ui.bootstrap.collapse)

折叠提供了一个简单的方法来显示和隐藏一个元素.

简单例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
<style>
<span style="white-space:pre">	</span>.active{background:red}
</style>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="CollapseDemoCtrl">
<span style="white-space:pre">	</span><button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<span style="white-space:pre">	</span><hr>
<span style="white-space:pre">	</span><div uib-collapse="isCollapsed">
<span style="white-space:pre">		</span><div class="well well-lg">Some content</div>
<span style="white-space:pre">	</span></div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
<span style="white-space:pre">	</span>app.controller('CollapseDemoCtrl', function ($scope) {
  $scope.isCollapsed = false;
});
</script>
</body>
</html>

1:"uib-collapse":true/false 默认为false设置折叠是否展开

<div uib-collapse="false">

Pagination (ui.bootstrap.pagination)

Tabs (ui.bootstrap.tabs)

Modal (ui.bootstrap.modal)

一:在angular中应用modal

$uibModal

使用方法:

直接注入到控制器中

.controller('name', function($scope,$uibModal) {

调用者

<span style="white-space:pre">		</span>$scope.withSelected = function(tem, con) {// 打开modal
<span style="white-space:pre">				</span>var selectNum = 0, selectAction = "";
<span style="white-space:pre">				</span>$scope.isok = false;
<span style="white-space:pre">				</span>$scope.iscancal = false;
<span style="white-space:pre">				</span>$scope.is_no_user = false;
<span style="white-space:pre">				</span>$scope.is_has_user = false;
<span style="white-space:pre">				</span>$scope.selectNum = 0;
<span style="white-space:pre">				</span>$('.user_check:checked').each(function() {
<span style="white-space:pre">					</span>selectNum = selectNum + 1;
<span style="white-space:pre">				</span>});
<span style="white-space:pre">				</span>if (selectNum == 0) {
<span style="white-space:pre">					</span>$scope.isok = true;
<span style="white-space:pre">					</span>$scope.is_no_user = true;
<span style="white-space:pre">				</span>} else {
<span style="white-space:pre">					</span>$scope.selectNum = selectNum;
<span style="white-space:pre">					</span>$scope.isok = true;
<span style="white-space:pre">					</span>$scope.iscancal = true;
<span style="white-space:pre">					</span>$scope.is_has_user = true;
<span style="white-space:pre">					</span>$scope.selectAction = selectAction;


<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>$scope.enable=function(){
<span style="white-space:pre">					</span>alert(222)//方法
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>$scope.items = {//属性
<span style="white-space:pre">					</span>isok : $scope.isok,
<span style="white-space:pre">					</span>is_no_user : $scope.is_no_user,
<span style="white-space:pre">					</span>iscancal : $scope.iscancal,
<span style="white-space:pre">					</span>is_has_user : $scope.is_has_user,
<span style="white-space:pre">					</span>selectNum : $scope.selectNum,
<span style="white-space:pre">					</span>selectAction : $scope.fselectedtValue,
<span style="white-space:pre">					</span>fun:$scope.enable
<span style="white-space:pre">				</span>};
<span style="white-space:pre">				</span>var _this = this;
<span style="white-space:pre">				</span>var modalInstance = $uibModal.open({
<span style="white-space:pre">					</span>templateUrl : 'setting/modal/' + tem + '.html',
<span style="white-space:pre">					</span>controller : con,
<span style="white-space:pre">					</span>resolve : {//传递信息给model控制器
<span style="white-space:pre">						</span>items : function() {
<span style="white-space:pre">							</span>return $scope.items;
<span style="white-space:pre">						</span>},parent: function(){
               <span style="white-space:pre">					</span> return _this
            }
<span style="white-space:pre">					</span>}
<span style="white-space:pre">				</span>});




<span style="white-space:pre">			</span>};

被调用者

.controller('ModalWithSelectCtrl', function($scope, $uibModalInstance, items,parent) {
	$scope.isok = items.isok;
	$scope.is_no_user = items.is_no_user;
	$scope.iscancal = items.iscancal;
	$scope.is_has_user = items.is_has_user;
	$scope.selectNum = items.selectNum;
	$scope.selectAction = items.selectAction;
	$scope.ok = function() {
	$uibModalInstance.close();
     parent.enable()//可以调用调用者的方法
};
	$scope.cancel = function() {
		$uibModalInstance.dismiss();
	};

})

二：" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数

1:animation:设置为false,关闭动画效果.默认"true".

2:appendTo:给modal设置一个容器.默认:"body".

3:backdrop:设置false关闭控件背景,默认为"true".

可能的值:

"true":有背景可以通过点击背景来关闭控件.

"false":没有背景.

"static":有背景,但点击背景不能关闭控件.

4:"backdropClass":给背景添加一个样式类.

5:"controller":为modal内容添加控制器.

6:"keyboard":设置modal是否可以通过按键"ESC"关闭,默认:"true".

7:"openedClass":modal打开时,为html body 添加样式类.

8:"size":设置modal的大小.可能的值:

"lg"

"sm"

9:"template":设置modal内容.

10:"templateUrl":通过引入html来设置modal的内容.

11:"windowClass":为modal添加样式类.

12:"windowTopClass":为当前modal添加样式类.

13:"resolve":调用控制器与modal控制器中传递值.

三:下面是uibModalInstance一些可用的对象.

1:"$uibModalInstance.dismiss();":取消modal

2:" $uibModalInstance.close();":关闭modal

ui-bootstrap-tpls 中文现在还不全的啊~,组件太多了,有空就更新

UI Bootstrap,用angular打造的bootstrap组件.

开始

依赖:

配置:

手风琴--Accordion (ui.bootstrap.accordion)

uib-accordion 设置

uib-accordion-group设置

警告--Alert (ui.bootstrap.alert)

uib-alert设置

按钮--Buttons (ui.bootstrap.buttons)

ui-btn-checkbox 设置

uib-btn-radio 设置

折叠--Collapse (ui.bootstrap.collapse)

Pagination (ui.bootstrap.pagination)

Tabs (ui.bootstrap.tabs)

Modal (ui.bootstrap.modal)

一:在angular中应用modal

二：" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数

三:下面是uibModalInstance一些可用的对象.

相关阅读

相关文章

相关问答

相关文档

ui-bootstrap-tpls 中文 现在还不全的啊~,组件太多了,有空就更新

UI Bootstrap,用angular打造的bootstrap组件.

开始

依赖:

配置:

手风琴--Accordion (ui.bootstrap.accordion)

uib-accordion 设置

uib-accordion-group设置

警告--Alert (ui.bootstrap.alert)

uib-alert设置

按钮--Buttons (ui.bootstrap.buttons)

ui-btn-checkbox 设置

uib-btn-radio 设置

折叠--Collapse (ui.bootstrap.collapse)

Pagination (ui.bootstrap.pagination)

Tabs (ui.bootstrap.tabs)

Modal (ui.bootstrap.modal)

一:在angular中应用modal

二：" $uibModal.open()",方法返回的是一个modal实例,下面是一些可用参数

三:下面是uibModalInstance一些可用的对象.

相关阅读

相关文章

相关问答

相关文档

ui-bootstrap-tpls 中文现在还不全的啊~,组件太多了,有空就更新