angular/angular-material：替换 HTML 滑块不会更新其 ng-model

Question

 $scope.$watch("checkbox", function(newVal, oldVal, scope) {
     var newmax = calcNewMax();
     var slider = angular.element(document.querySelector("#slider"));
     var parent = slider.parent();  
     slider.remove();
     var newSlider = '<md-slider id="slider" flex="100" class="md-warn" md-discrete ng-model="size" step="10" min="100" max="' + newmax + '" aria-label="rating"> </md-slider>';
     parent.prepend($compile(newSlider)($rootScope));
     $scope.size = 500;
                });

我正在使用 angular material 的 md-slider。我真正想要的是根据用户通过复选框的选择更新滑块的最大值。我第一次尝试为 max 属性设置一个新值没有成功（对 aria-valuemax 也没有成功）。

所以我决定只移除整个滑块并替换它。上面的代码有效。

但是不起作用的是，当我添加新滑块时，绑定到 $scope.size 的 ng-model 似乎不再同步（我有一个绑定到它的标签值，它不会更新）。当然 $apply() 不起作用，因为我已经在 $watch.

Answer 1

我在第一次尝试时就尝试了您想要的，并且成功了：

<md-slider step="1" md-discrete min="0" max="{{max}}" ng-model="value"></md-slider>
<md-checkbox ng-model="max" ng-true-value="20" ng-false-value="{{baseMax}}">
       max 20
</md-checkbox>
<md-checkbox ng-model="max" ng-true-value="40" ng-false-value="{{baseMax}}">
       max 40
</md-checkbox>
<md-checkbox ng-model="max" ng-true-value="60" ng-false-value="{{baseMax}}">
       max 60
</md-checkbox>

请看看这个插件并与你的解决方案进行比较 https://plnkr.co/edit/BAM5ToIzZDUoqWPcQlWA?p=preview

angular/angular-material：替换 HTML 滑块不会更新其 ng-model

angular/angular-material: replacing a HTML slider doesn't update its ng-model

angularjs

angularjs-ng-model

angular-material