改變輸入範圍AngularJS

範圍應視param改變它的值和位置並沒有改變以改變param改變輸入範圍AngularJS

HTML的值：

<body ng-app="myApp"> 
    <div ng-controller="MyRngCtrl"> 
     Param:{{param}} 
    </div> 
    <hr> 
    <div ng-controller="rangeCtrl"> 
    <div>modelValue:{{modelValue}}</div> 
     <input type="range" style="width: 300px;" 
      min = "0" 
      max = "300" 
      step = "1" 
      ng-change = "rangeChange()" 
      ng-model = "modelValue"> 
    </div> 
    </body>

JS：

app.controller('rangeCtrl', function($scope) { 

    $scope.modelValue = $scope.param; 
    $scope.rangeChange = function() { 
    } 
});

例如：JSFiddle

來源

2016-12-07 AndreyH

你舉的例子多了一個答案並不代表憎惡你的小提琴。然後，您正在使用兩個不同的控制器，然後您正在更新angularjs的摘要循環之外的值。 –

@ bash.d在原始問題中，我的控制器看起來像這樣：[JSFibble]（https://jsfiddle.net/Ahoncharuk/f84p3yd0/） – AndreyH

在第一個示例中，控制器「MyRngCtrl」只是「模擬」值param – AndreyH

我在這裏使用$rootScope

var app = angular.module('myApp', []); 
 
app.controller('MyRngCtrl', function($rootScope, $timeout) { 
 
    (function update() { 
 
    $timeout(update, 5000); 
 
    $rootScope.param = Math.round((Math.random() * 10) * 10 * 3); 
 
    }()); 
 
}); 
 
app.controller('rangeCtrl', function($scope, $rootScope, $timeout) { 
 
    (function update() { 
 
    $timeout(update, 5000); 
 
    $scope.modelValue = $rootScope.param; 
 
    }()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="MyRngCtrl"> 
 
    Param:{{param}} 
 
    </div> 
 
    <hr> 
 
    <div ng-controller="rangeCtrl"> 
 
    <div>modelValue:{{modelValue}}</div> 
 
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-model="modelValue"> 
 
    </div> 
 
</body>

來源

2016-12-07 11:02:21 Gourav

它看起來不錯！我去了另一邊：[JSFiddle]（http://jsfiddle.net/Ahoncharuk/0mp6e5o8/1/），並面對這樣一個事實，即我至少暫時不能更改「modelValue」，直到值的「參數」沒有改變 – AndreyH

如果你減少「$超時」的時間段，那麼也會有同樣的問題 – AndreyH

試試這個

var app = angular.module('myApp', []); 
 
app.controller('MyRngCtrl', function($scope, $timeout) { 
 

 
    (function update() { 
 
    $timeout(update, 5000); 
 
    $scope.param = Math.round((Math.random() * 10) * 10 * 3); 
 
    $scope.modelValue = $scope.param 
 

 
    }()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="MyRngCtrl"> 
 
    Param:{{param}} 
 

 
    <hr> 
 

 
    <div>modelValue:{{param}}</div> 
 
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-change="rangeChange()" ng-model="modelValue"> 
 
    </div> 
 
</body>

來源

2016-12-07 10:42:59 Gourav

這個解決方案有效，但你的回調邏輯與超時處理程序綁定，這不是很好的風格。 –

改變輸入範圍AngularJS

回答

相關問題