AngularJS UI Bootstrap menggabungkan dua bilah kemajuan

Anda dapat menggunakan ng-style untuk memperbarui posisi garis vertikal div untuk mengatasi masalah ini. Ini akan memudahkan Anda mengatur posisi dan nilai bilah vertikal. Lihat ini contoh kerja di 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>

JS

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

CSS

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

Sebagai alternatif saya juga menambahkan implementasi serupa dengan bilah kemajuan bertumpuk.

Saya belum mencobanya sendiri, tapi itulah yang terlintas di benak saya ketika melihat pertanyaan Anda.

Anda dapat memodifikasi CSS dari ui-progressbars sedemikian rupa sehingga saling tumpang tindih; mungkin dengan position:absolute atau apa pun. Ini akan memungkinkan penanda numerik untuk duduk bersebelahan seperti yang Anda inginkan.

Selanjutnya, Anda dapat memodifikasi CSS bilah itu sendiri. Setiap bilah yang kurang dari maksimal, mungkin memberinya kelas .no-fill atau semacamnya. Ini akan rumit, tetapi dengan cara itu Anda dapat memiliki bilah apa pun yang kurang dari % maksimal agar hanya terdiri dari properti border-right, sedangkan bilah % maks akan menjadi bilah dengan latar belakang dan semua gaya bilah kemajuan normal.

Hal yang mungkin muncul adalah Anda mungkin juga harus mengurutkan z-index batang sehingga batang dengan nilai terbesar berada di belakang nilai yang lebih kecil dan garis vertikalnya muncul.

Semoga beruntung!

PEMBARUAN AKHIR (dengan 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>

CSS

/* 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);
}

Anda dapat menggunakan bilah kemajuan bertumpuk dengan beberapa gaya khusus.

<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'
}];

});

Lihat bilah kemajuan di https://angular-ui.github.io/bootstrap/ ini

Contoh saya ada di sini https://plnkr.co/edit/9qCP1lV40BQ9DYDHvayo?p=preview

Saya telah mengedit kode di bilah kemajuan yang ditumpuk. Menurutku ini membantu.

Anda dapat menambahkan gaya khusus ke dalamnya untuk menunjukkan nilai kemajuan.