angularjs结合bootstrap--进度条progressBar

angularjs结合bootstrap–进度条progressBar


<html lang="en" ng-app="ngShowcaseApp">
<head>
    <meta charset="UTF-8">
    <title>progressBartitle>
    <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-successoption>
            <option value="progress-bar-info">progress-bar-infooption>
            <option value="progress-bar-danger">progress-bar-dangeroption>
            <option value="progress-bar-warning">progress-bar-warningoption>
        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>

运行结果:
angularjs结合bootstrap--进度条progressBar_第1张图片

你可能感兴趣的:(angularjs)