文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jquery滑块angularjs范围值不会更改。

问使用jquery滑块angularjs范围值不会更改。
EN

Stack Overflow用户

提问于 2015-04-21 09:16:24

回答 1查看 652关注 0票数 1

我正在使用angularjs做一个项目，在这个项目中，我使用jquery滑块。使用这个滑块，我必须更改一个选择框值，它在一个$scope数组中定义，但它不起作用。

这里有一个示例代码，我只想知道如何基于jquery滑块更改范围值

Html代码

<html lang="en" ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/layout.css" type="text/css" />
<script src="<?php echo base_url(); ?>assets/angular/angular.js" type="text/javascript"/></script>
</head>
<body ng-controller='CompositionController'>


              <div class="thinkness-bar">
                                                <div class="popupslider">
                                                    <div id="testslider" class="jquery-slider"></div>                                                     
                                                    <input type="text" id="testamount" class="progressnumber" value="500"  >
                                                    <input type="hidden" id="testhdndfaltThick" name="testhdndfaltThick" value="50" /> 
                                                </div>
                                            </div>
           </div>
           {{value}}

</body>

<script src="<?php echo base_url(); ?>assets/includes/jquery.1.11.1.min.js"></script>
<script src="<?php echo base_url(); ?>assets/includes/jquery.1.10.2.js"></script> 
<script src="<?php echo base_url(); ?>assets/includes/jquery.ui.1.11.1.js"></script> 
</html>

脚本代码

<script>
var myapp = angular.module('myapp', []);

myapp.controller('CompositionController', function ($scope,$http) 
{
    $scope.value =0 
     var sliderValue = [2,3,5,7,8,10,11,13,15,18,19];
    $("#testslider").slider({ 
                range: "min", 
                value: 8, 
                min: 1, 
                max: 20, 
                slide: function(event, ui) 
                { 
                  if(sliderValue.indexOf(ui.value)===-1 ) return false;
                         $("#testamount" ).val( ui.value);

                  } 
                }); 
               $( "#testamount" ).val( $( "#testslider" ).slider( "value" ) );  
               $scope.value =$( "#testamount" ).val(); 
});


</script>

提前谢谢。

jquery

html

angularjs

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-21 09:20:17

由于在jquery事件中设置值，angular不知道某些内容已被更新，因此需要调用

$scope.$apply();

在设置$scope.value之后。

PS:我真的希望这只是一个测试，而不是实际的生产代码。

编辑：

嗯，有几个问题: ng-app在body标签中丢失了，我想您打算用滑块更改值……

我做了一个普鲁克尔

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29767870

复制

相似问题

问使用jquery滑块angularjs范围值不会更改。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery滑块angularjs范围值不会更改。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery滑块angularjs范围值不会更改。
EN