AngularJS UI Bootstrap ผสานสองแถบความคืบหน้า

คุณสามารถใช้ ng-style เพื่ออัปเดตตำแหน่งของเส้นแนวตั้ง div เพื่อแก้ไขปัญหานี้ได้ ซึ่งจะช่วยให้คุณสามารถกำหนดตำแหน่งและค่าของแถบแนวตั้งได้อย่างง่ายดาย ดูตัวอย่างการทำงานของ นี้ บน plunkr:

HTML

<uib-progressbar animate="false" value=95 type="success"><b>95%</b></uib-progressbar>
<div id="vertical-mark" ng-style="style()">&nbsp;{{mark}}%</div>

เจเอส

$scope.mark = 50;
  $scope.style = function() {
    return {
      'left': $scope.mark + '%'
    }
  }

ซีเอสเอส

#vertical-mark {
  position:relative;
  border-left:1px solid #000;
  height:50px;
  top:-57px;
}

อีกทางเลือกหนึ่ง ฉันได้เพิ่มการใช้งานที่คล้ายกันด้วยแถบความคืบหน้าแบบเรียงซ้อน

ฉันไม่ได้ลองทำด้วยตัวเอง แต่สิ่งที่เข้ามาในใจเมื่อเห็นคำถามของคุณ

คุณสามารถแก้ไข CSS ของ ui-progressbars เพื่อให้ซ้อนทับกัน อาจจะด้วย position:absolute หรืออะไรเกี่ยวกับคุณ ซึ่งจะทำให้เครื่องหมายตัวเลขทั้งหมดนั่งติดกันตามที่คุณต้องการ

จากนั้น คุณสามารถแก้ไข CSS ของแถบได้ด้วยตนเอง แถบใดๆ ที่น้อยกว่าค่าสูงสุด อาจให้คลาส .no-fill หรืออะไรสักอย่างแก่พวกเขา อาจเป็นเรื่องยาก แต่ด้วยวิธีนี้ คุณสามารถมีแถบใดๆ ที่น้อยกว่า max % เพื่อให้ประกอบด้วยคุณสมบัติ border-right เท่านั้น ในขณะที่แถบ % สูงสุดจะเป็นแถบที่มีพื้นหลังและรูปแบบแถบความคืบหน้าปกติทั้งหมด

สิ่งที่อาจปรากฏขึ้นคือคุณอาจต้องเรียงลำดับแท่ง ' z-index เพื่อให้แท่งค่าที่ใหญ่ที่สุดอยู่ด้านหลังค่าที่น้อยกว่าและเส้นแนวตั้งปรากฏขึ้น

ขอให้โชคดี!

การอัปเดตครั้งสุดท้าย (ด้วย plunkr)

JS

$scope.stacked = [{
  value: 55,
  type: 'info'
}, {
  value: 95,
  type: 'success'
}];

HTML

<div class="progress-wrapper">
  <uib-progress max="100" ng-repeat="bar in stacked | orderBy:'value':true">
    <uib-bar value="bar.value" type="{{bar.type}}">
      <span class="marker" ng-hide="bar.value < 5">
          {{bar.value}}%
        </span>
    </uib-bar>
  </uib-progress>
</div>

ซีเอสเอส

/* wrapper to help us contain the bars and their positioning */
.progress-wrapper {
  position: relative;
  padding-top: 30px;
}

/* make all progress bars the same, no bg so they 'stack' */
.progress-wrapper .progress {
  width: 100%;
  position: absolute;
  overflow: visible;
  background: none;
}

/* first child is the background bar, give it color */
.progress-wrapper .progress:first-child {
  background: #EEE;
}

/* make all bars invisible and with a right, border;
   except the last/furthest back bar, give it color only
*/
.progress-wrapper .progress .progress-bar {
  background: none;
  border-right: solid 2px #FFF;
}
.progress-wrapper .progress:first-child .progress-bar {
  background: #0AF;
  border-right: none;
}

/* makes sure that markers behave,
   otherwise they'll fly away
*/
.progress .progress-bar {
  position: relative;
}

/* style for marker element and drop triangle */
.progress .marker {
  position: absolute;
  padding: 0 2px;
  top: -30px;
  right: -15px;
  color: #FFF;
  background: #000;
}
.progress .marker:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #000;
  position: absolute;
  left: 30%;
  bottom: -5px;
  transform: rotate(45deg);
}

คุณสามารถใช้แถบความคืบหน้าแบบซ้อนกับสไตล์ที่กำหนดเองได้

<uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>

$scope.stacked = [{
  value: 10,
  type: 'info'
}, {
  value: 35,
  type: 'success'
}];

});

อ้างอิงแถบความคืบหน้าใน https://angular-ui.github.io/bootstrap/

ตัวอย่างของฉันอยู่ที่นี่ https://plnkr.co/edit/9qCP1lV40BQ9DYDHvayo?p=preview

ฉันได้แก้ไขโค้ดในแถบความคืบหน้าแบบเรียงซ้อนแล้ว คิดว่านี่ช่วยได้

คุณสามารถเพิ่มสไตล์ที่กำหนดเองเพื่อแสดงค่าความคืบหน้าได้