DEMO

Question

我正在尝试使用ng-style创建一个进度条。问题在于，当我创建它时，进度滑块仅向中间移动，并且不覆盖整个条形。进度条应该是几个小时，如：4h，5h等。当我使用％时，它可以工作。任何人都可以帮忙吗？

这是我的代码：

<div class="progress-bar progress-bar-slider">
    <input class="progress-slider" type="range" min="4" max="12"
           ng-model="workingHoursSelectedRange">
    <div class="inner" ng-style="{width: workingHoursSelectedRange + '%' }"></div>
</div>

的jsfiddle： https://jsfiddle.net/f6h32sfx/

Answer 1

试试这会帮到你

"business-name"

Answer 2

DEMO

＆＃13;

.c-progress-box {
  margin-left: 40px;
  min-width: 240px;
  position: relative;
  top: 8px;
  border: none;
}!important

.c-progress-box .c-percentage-cur .c-num {
  margin-right: 5px;
}!important

.c-progress-box .c-progress-bar {
  width: 100%;
  height: 12px;
  background: #f2f1f1;
  margin-bottom: 3px;
  box-shadow: 0 0 2px #D5D4D4 inset;
  position: relative;
}!important

.c-progress-box .c-progress-bar .c-inner {
  position: relative;
  width: 0;
  height: 100%;
  background: #239bd6;
}!important

.c-progress-bar .inner {
  height: 0;
  width: 0;
  transition: all 1s ease-out;
}!important

.c-progress-bar-slider .inner {
  transition: none;
}!imporatant

.c-progress-bar-slider .inner:after {
  content: " ";
  width: 5px;
  height: 14px;
  ;
  background-color: #ccc;
  position: absolute;
  right: -2px;
  top: -2px;
  border: 1px solid #bbb;
  border-radius: 2px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  margin: 0px;
}!important

.c-progress-slider {
  opacity: 0;
  width: 100%;
  height: 15px;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  z-index: 1;
}!important

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
  <div name="myForm" xng-controller="ExampleController">
    <div class="c-progress-box" style="border: none;">
      <div class="c-percentage-cur">
        <span class="c-num" ng-bind="workingHoursSelectedRange"></span>
      </div>
      <div class="c-progress-bar c-progress-bar-slider">

        <input class="c-progress-slider" type="range" min="4" max="12" ng-model="workingHoursSelectedRange">
        <div class="c-inner" ng-style="{width: workingHoursSelectedRange + '%' }"></div>
      </div>
    </div>
  </div>
</body>

＆＃13;

如何使用ng-style进行条形图

2 个答案:

DEMO