angularjs结合bootstrap--进度条progressBar

最新推荐文章于 2024-08-12 08:34:37 发布

isence

最新推荐文章于 2024-08-12 08:34:37 发布

阅读量9.1k

点赞数 3

分类专栏： angularjs 文章标签： bootstrap angularjs

本文链接：https://blog.csdn.net/qq_15257371/article/details/48750963

版权

angularjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

angularjs结合bootstrap–进度条progressBar

<!DOCTYPE html>
<html lang="en" ng-app="ngShowcaseApp">
<head>
    <meta charset="UTF-8">
    <title>progressBar</title>
    <link rel="stylesheet" href="bootstrap.min.css">

</head>
<body ng-controller="ctrl">
    <div ng-class="{progress: true, 'progress-striped': vm.striped}">
        <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">
            <div ng-if="vm.showLabel">{{vm.value}}%</div>
        </div>
    </div>

    <h3>选项</h3>
    <label>进度：<input type="number" class="form-control" ng-model="vm.value"/></label>
    <button class="btn btn-primary" ng-click="vm.value=0">0%</button>
    <button class="btn btn-primary" ng-click="vm.value=20">20%</button>
    <button class="btn btn-primary" ng-click="vm.value=60">60%</button>
    <button class="btn btn-primary" ng-click="vm.value=100">100%</button>
    <hr/>
    <label>斑马纹<input type="checkbox"  ng-model="vm.striped"/></label>
    <label>文字<input type="checkbox" ng-model="vm.showLabel"/></label>
    <hr/>
    <label>风格：
        <select ng-model="vm.style" class="form-control">
            <option value="progress-bar-success">progress-bar-success</option>
            <option value="progress-bar-info">progress-bar-info</option>
            <option value="progress-bar-danger">progress-bar-danger</option>
            <option value="progress-bar-warning">progress-bar-warning</option>
        </select>
    </label>
</body>
<script src="angular.js"></script>
<script >
    'use strict';

    angular.module('ngShowcaseApp',[]).controller('ctrl', function ($scope) {
        var vm = $scope.vm = {};
        vm.value = 50;
        vm.style = 'progress-bar-info';
        vm.showLabel = true;
        vm.striped = true;
    });
</script>
</html>