当我将其添加到ng-repeat中时,输入type =“ range”突然移动

yavg

我有3个值的变量$scope.values对于每个值,我都会创建一个滑块。基本上每个滑块的最大值是的值item.value,最小值始终为2,当前值为最高。但我不知道为什么会出现这种奇怪的行为。您不能流畅地移动滑块。

我该如何解决?非常感谢你

http://jsfiddle.net/2ot0n840/

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

var myApp = angular.module('myApp', []);

myApp.controller('CalcCtrl', function ($scope) {
  $scope.values=
  [
    { "value":30},
    { "value":50},
    { "value":1}

   //current value= is item.value
   //max value is item.value
   //min value is 2.

  ]
马修·伯格

问题是您使用的最大值与实际值相同,因此每次调整最大值时,最大值都会改变。您可以通过检查dom来查看。相反,您应该具有以下内容:

html

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

Java脚本

var myApp = angular.module('myApp', []);

myApp.controller('CalcCtrl', function ($scope) {
    $scope.values=
  [
    { "value":30, "max": 30},
    { "value":50, "max": 50},
    { "value":1, "max": 1}

   //current value= is item.value
   //max value is item.value
   //min value is 2.

  ]
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当我将其添加到Microsoft团队时,为什么我的标签是空白的?

当我尝试将其添加到ContentPane时,JPanel不会出现

当我从我的android应用向http页面发出请求时,移动关键字会添加到url中

当我粘贴命令而不是键入命令时,为什么未将其添加到历史记录中

我有ImageView的子类,但是当我将其添加到XML中时会出现膨胀错误

当我添加斜杠时,我将数字添加到记录中

链接到同一页面导致页面跳转-但仅当我将其添加到magento中时

错误:对于输入字符串:“”,当我将对象层添加到我的tilemap中时

当我单击 td 标签(javascript + html)时,我无法将输入标签添加到 td 标签中

Google Calendar Api:当我将其添加到活动时如何向与会者发送通知电子邮件?

当我将 ConnectionId 添加到组时,我丢失了集线器中的所有连接

当我在Python中循环时,只剩下最后添加到字典的键/值对

当我尝试将dateTime字段添加到表中时出错

当我将 tableview 添加到 ViewController 时,tableview 没有正确添加

为什么 range 不返回数组,但当我将它添加到列表时会返回?

当我将JScrollPane添加到我的JTable时,该JTable不可见

创建新课程时,我应该如何将其添加到新课程中?

在移动引导程序上查看侧栏时如何将其添加到导航栏

当我将电话的新输入字段添加到表单时,我需要它显示电话2 ..电话3等

无法创建新卡,当我尝试添加新记录时将其添加到同一张卡中,因此无法在Ionic 3中创建新卡

这是我添加到购物车的代码,当我单击添加到购物车时,它给了我我不想要的多余的空行

如何将我的PWA添加到移动设备上的共享表中?

如何通过ng-model将今天的日期添加到我的日期输入中?

当我将onClickListener添加到ImageView时,应用程序崩溃

当我将滚动条添加到弹出窗口时,bootstrap popover箭头消失

当我添加到它时,PHP 数组不断被覆盖......为什么?

NullPointerException 当我尝试将对象从 jpa 存储库添加到列表时

当我按下按钮时试图将内容添加到Listview

当我尝试将类的内容添加到数组上时程序崩溃