$ watch或ng-change，根據值檢測onchange的範圍輸入和過程

我是AngularJS/Ionic的新手，我試圖檢測輸入類型的值的變化=「range」，並且根據這個值在js中做事情。

但我不知道如何檢測它：$ watch或ng-change？

下面的代碼： HTML：

<html ng-app="SnowBoard"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Checkboxes</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    </head> 

    <body ng-controller="ComputeCtrl"> 

    <ion-content> 

     <div class="range"> 
     <input id="levelrange" type="range" min="0" max="10" value="5" name="userlevelofsurfing" ng-model="levelvalue" ng-change="setLevelText()"> 
     {{levelvalue}} 
     </div> 

     <div id="leveldisplay"> 
     </div> 

     {{testvariable}} 

    </ion-content> 

    </body> 
</html>

JS：

angular.module('SnowBoard', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
     url: "/app", 
     abstract: true, 
     templateUrl: "templates/menu.html", 
     controller: 'AppCtrl' 
    }) 


    .state('app.browse', { 
     url: "/browse", 
     views: { 
     'menuContent' :{ 
      templateUrl: "templates/compute.html", 
      controller: 'ComputeCtrl' 
     } 
     } 
    }) 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/playlists'); 
}) 

.controller('ComputeCtrl', function($scope, $ionicPopup, $timeout) { 

    $scope.data = { 
    levelvalue: 5, 
    level1wordDescription: "INTERMEDIATE+", 
    testvariable: "dummy" 
    } 

    $scope.$watch('data.levelvalue', function(newVal, oldVal) { 
    console.log('data.levelvalue is now '+newVal); 
    console.log('data.levelvalue is now '+data.levelvalue); 

    }); 

    $scope.setLevelText = function(rangeValue) { 
    console.log('range value has changed to :'+$scope.data.levelvalue); 
    $scope.data.testvariable = $scope.data.levelvalue; 
    } 



});

http://codepen.io/LouisDoe/pen/jEEJxd

來源

2014-11-22 Louis

你可以使用兩種，雖然我在這種情況下，建議ngChange。當你在看輸入時，ngChange通常是最好的選擇。您應該儘量減少$ scope。$ watch表達式的性能，在這種情況下，它會重複ngChange已經處理的內容。刪除$ watch。

你的問題在ng模型中。你沒有正確引用它，當你的模型實際上是data.levelvalue時，你有levelvalue。此外，我刪除了value="5"屬性，因爲ngModel負責處理這個問題，並且阻礙了它的發展。

<input id="levelrange" type="range" min="0" max="10" name="userlevelofsurfing" ng-model="data.levelvalue" ng-change="setLevelText()">

來源

2014-11-22 16:32:25

感謝您的回答。但是，如果我使用'ng-change =「setLevelText（）'而不是'ng-change =」setLevelText（data.levelvalue）''該函數不起作用... – Louis 2014-11-23 19:16:14

看到這個，你不需要通過該值是因爲它已經在$ scope上，並且您甚至不在更改事件方法中使用它。 http://codepen.io/gnomeontherun/pen/ZYGWzJ – 2014-11-24 19:01:10

$ watch或ng-change，根據值檢測onchange的範圍輸入和過程

回答

相關問題