angularjs结合bootstrap--进度条progressBar

来源：互联网发布：道萨迪亚斯矩阵编辑：程序博客网时间：2024/06/07 06:26

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>

运行结果：

0 0