t14_AngularJS_HTML_DOM/t1.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-init="mySwitch=true" ng-controller="myCtrl">
<p>
	<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
	<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p ng-show="!mySwitch">Can you see me^^?</p>
<p>
{{ mySwitch }}
</p>

<hr>
{{istrue}}

<h1 style="{{h1style}}">That la thu vi :v</h1>

</div> 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
	$scope.istrue=true;
	var style_purple='text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,0 0 0.2em #87F';
	var style_red='text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87';
	var style_green='text-shadow: 0 0 0.2em #8F7';
	$scope.h1style='text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,0 0 0.2em #87F';
	$interval(function () {
		//$scope.ranNum=Math.floor(Math.random() * 10);
		$scope.istrue=$scope.istrue?false:true;
		$scope.istrue?$scope.h1style=style_red:$scope.h1style=style_green;
	}, 500);
});
</script>
</body>
</html>