Question

当我点击框中的项目时，我有几个选择框我想要更新进度条...每个选择的框应该添加到进度...当我更改特定框的值时以前的值应该“减去”，并且应该添加新值。所以100％不应该溢出。

示例：在第一个框中，我在第二个框中选择了一个进度为90％的项目我选择了一个项目，在我的解决方案中有10％的进度，当我现在更改第一个选择框中的项目时，进度值被添加到100％。没有找到任何想法或解决方案来解决

...
    <select
        id="inputFarbe"
        class="form-control nullable"
        ng-model="signup.carConfiguration.farbe"
        ng-change="updateProgress(signup.carConfiguration.farbe)"
        ng-options="item.name for item in items | itemFilter:3">
            <option value="">-- hier auswählen --</option>
    </select>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}}%;">
        {{progress}}%
    </div>
    $scope.updateProgress = function(itemProg){ 
        $scope.progress += parseInt(progressCount[itemProg]);
    }
...

Selectboxes for Progressbar

我的进度条有50％的原因，我选择Model3Türer我现在的进度条有60％，如果我换到型号：5türer应该减去10％，加上5％所以它现在有55％。 ...与其他选择框应该是相同的

Answer 1

您可以使用$watch，因为它会为您提供旧值和新值。

$scope.$watch('signup.carConfiguration.farbe', function(newValue, oldValue) {
    $scope.progress -= parseInt(progressCount[oldValue]);
    $scope.progress += parseInt(progressCount[newValue]);
});

另一种解决方案是总结每次变化的所有变量：

$scope.updateProgress = function() {
    $scope.progress = parseInt(progressCount[$scope.signup.carConfiguration.farbe]) + parseInt(progressCount[$scope.valueFromSecondSelectBox]);
};

顺便说一句：我认为最好使用ng-style而不只是style。

Angularjs选择更新进度的框

1 个答案: