CODEWITHSUNDEEP
angularjs
Fanhe Kong
Fanhe Kong

Reputation: 29

AngularJS change bound-data value after time delay

I want to change a bound-data value by controller after some time delay, but not working, the following is a very simple code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.controller('controller',['$scope',function($scope){
    $scope.color='red';
    setTimeout(function(){
        $scope.color='blue';
    }, 0);
}])
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
{{color}} <input ng-model="color">
</div>
</body>
</html>

Upvotes: 0

Views: 83

Answers (2)

Anil Shrestha
Anil Shrestha

Reputation: 1200

  $timeout(function(){
    $scope.color='blue';
  }, 10000);

OR

  $timeout(function(){
    $scope.color='blue';
  }, 20000);

use second parameter as millisecond. you can put any value you want. if you want 1 second after use 10000 and so on.

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Don't use setTimeout(function(){}). Use $timeout instead (Angular way)

app.controller('controller',['$scope','$timeout', function($scope, $timeout){
    $scope.color='red';
    $timeout(function(){
        $scope.color='blue';
    });
}])

Also for 0 milliseconds you can omit delay value

On start $scope.color has value 'red' . setTimeout does not trigger digest cycle so when you change color to blue it will take no effect.

The $timeout triggers digest cycle and therefore in HTML {{color}} we will see blue

Upvotes: 2

Related Questions