javascript - AngularJS - 在进度条 CSS 期间绘制边框

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 7 年前。

Improve this question

我有一个基于时间的进度条，我在前端使用 AngularJS。我的进度条工作正常，但我想在某些值发生变化时绘制一个边框或一条简单的线，例如当 temp1 变为 '1' 时，然后在 temp2 变为 '1' 时绘制另一条边框或线。

这是我到目前为止所做的:

<div id="container" style="width:100%; height:20px; border:1px solid black;">
    <div id="progress-bar" ng-style="myCSSStyle(patient)">

    </div>
</div

这是我 Controller 中的函数:

$scope.myCSSStyle = function(patient) {
    return {width: patient.clock * 0.055 + '%', 'background-color': '#1ab394'};
};

我的 CSS:

#progress-bar {
    height: 100%;
    max-width: 100%;
}

我想检查 temp1 的值何时更改为“1”，应在进度条 div 中绘制一条线，指示它更改的时间，然后在 temp2 将其值更改为“1”时再次绘制。有人可以建议解决这个问题吗？

编辑:

这就是我希望进度条看起来像在分别将 temp1 和 temp2 设置为 1 后绘制黑线和红线的地方

最佳答案

你可以用几个元素来制作进度条:bar, black-mark, red-mark。工作 example (jsfiddle)

    <div id="progress-bar">
        <div class="bar" ng-style="myCSSStyle(patient)"></div>
        <div class="black-mark" ng-show="widthValue() > 30"></div>
        <div class="red-mark" ng-show="widthValue() > 50"></div>
    </div>

定义触发黑标和红标可见性的规则。

angular.module('myModule', [])
  .controller('myCtrl', function ($scope) {

  $scope.patient = {
    clock: 1000
  };

  $scope.myCSSStyle = function (patient) {
    return {
        width: $scope.patient.clock * 0.055 + '%',
        'background-color': '#1ab394'
    };
  };

  $scope.widthValue = function () {
    return parseFloat($scope.myCSSStyle().width, 10);
  };

});

更新:

我添加了按钮来显示/隐藏黑标。红色标记已删除。

updated example

关于javascript - AngularJS - 在进度条 CSS 期间绘制边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32433373/