AngularJS中ng-repeat内range输入拖动卡顿异常问题求助

我来帮你搞定这个滑块卡顿的问题！咱们先拆解下问题根源：

你当前的代码里，把滑块的ng-model（当前值）和max（最大值）都绑定到了同一个item.value属性上。这就造成了一个恶性循环：当你拖动滑块改变item.value时，滑块的最大值也会同步跟着变，浏览器需要不断重新计算滑块的可拖动范围，最终就出现了跳变、卡顿的异常。另外你的第三个元素初始值是1，小于设定的最小值2，这也会导致滑块的初始状态不符合预期哦。

解决方案：分离当前值与最大值 #

核心思路是给每个列表项单独存储初始最大值，让滑块的最大值固定为这个初始值，只把当前拖动的数值绑定到ng-model上。

修改后的完整代码如下：

HTML部分

<div ng-controller="CalcCtrl">
  <div ng-repeat="item in values">
    <input type='range' 
           ng-model="item.currentValue" 
           max="{{item.maxValue}}" 
           min="2" 
           ng-init="item.currentValue = item.maxValue > 2 ? item.maxValue : 2">
    <span>{{item.currentValue}}</span>
  </div>
</div>

JavaScript部分

var myApp = angular.module('myApp', []);
myApp.controller('CalcCtrl', function ($scope) {
  $scope.values= [
    { "maxValue":30},
    { "maxValue":50},
    { "maxValue":1}
  ]
});

关键修改点说明 #

• 给每个item新增maxValue字段，专门存储滑块的固定最大值（也就是你原来的初始value）
• 用currentValue作为滑块的ng-model，绑定当前拖动的数值
• 通过ng-init做了一个简单判断：如果maxValue大于等于2，初始值就设为maxValue；如果小于2（比如第三个元素的1），就把初始值设为最小值2，保证滑块状态合法
• 滑块的max属性绑定到固定的maxValue，拖动时不会再动态变化

这样修改后，滑块的拖动范围是固定的，AngularJS不需要反复更新最大值，自然就能流畅拖动啦！

内容的提问来源于stack exchange，提问作者yavg