tps2015gh/test_angularJS.html

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

<!--

I tested on  :  https://www.w3schools.com/code/tryit.asp?filename=FWCHCX5OSK4K

@author Thitipong Samranvanich
@since   2018-10-18
@require  angulraJS

-->
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

<br>test-start
<r1 users="users"

   ></r1>
<br>test-end

</div> <!-- end of controller -->

<script>
//===================================================================
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.users = [{id:1,name:"tu1"},
    				{id:2,name:"tu2"},
                    {id:3,name:"tu3"}];
    $scope.test2 = "test2";
});
//===================================================================
function r1Controller($scope,$element ){
	var ctr = this;
    ctr.color = "red"
    ctr.count = 0
    ctr.doTest = function(){
    	console.log("doTest")
    };
    ctr.getTest = function(){
    	return "getTEST()";
    };
    ctr.getTest2 = function(msg){
    	return "getTEST2("+ msg + ")";
    };
    ctr.onrowclick = function(id){
    	alert("clicked " + id )
    };
    ctr.onmouseover = function(user){
         user.over = "true"
         user.bgcolor = "yellow"
    };
    ctr.onmouseout = function(user){
         user.over = "false"
         user.bgcolor = "white"
    };
};
app.component("r1",{
	template: '<font color=red>{{"r1"}} {{1+2}} {{$scope}}'
    			 +'<br> getTest()={{$ctrl.getTest()}}'
				 +'<br> getTest2()={{$ctrl.getTest2("Hello")}}</font>'
                 + '<br>users= <!--font color=blue>{{$ctrl.users}} </font-->'
                 + '<li ng-repeat="user in $ctrl.users" '
                 + ' style="background-color:{{user.bgcolor}};cursor:pointer;"  '
                 + '   ng-click="$ctrl.count = $ctrl.count+1"  '
                 + '   ng-mouseover="$ctrl.onmouseover(user)"  '
                 + '   ng-mouseout="$ctrl.onmouseout(user)"  '
                 +'>{{user}}</li>'
				 + '</font>'
                 +  '<br>color= {{$ctrl.color}} '
                 +  '<br>count = {{$ctrl.count}} '
    ,controller: r1Controller
    ,bindings: {
    	users: '<'  // display user
        ,rowclick: '&'
    }
});
//==================================================================
</script>

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

	<!--

	I tested on : https://www.w3schools.com/code/tryit.asp?filename=FWCHCX5OSK4K

	@author Thitipong Samranvanich
	@since 2018-10-18
	@require angulraJS

	-->
	<div ng-app="myApp" ng-controller="myCtrl">

	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	<br>
	Full Name: {{firstName + " " + lastName}}

	<br>test-start
	<r1 users="users"

	></r1>
	<br>test-end

	</div> <!-- end of controller -->

	<script>
	//===================================================================
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	$scope.users = [{id:1,name:"tu1"},
	{id:2,name:"tu2"},
	{id:3,name:"tu3"}];
	$scope.test2 = "test2";
	});
	//===================================================================
	function r1Controller($scope,$element ){
	var ctr = this;
	ctr.color = "red"
	ctr.count = 0
	ctr.doTest = function(){
	console.log("doTest")
	};
	ctr.getTest = function(){
	return "getTEST()";
	};
	ctr.getTest2 = function(msg){
	return "getTEST2("+ msg + ")";
	};
	ctr.onrowclick = function(id){
	alert("clicked " + id )
	};
	ctr.onmouseover = function(user){
	user.over = "true"
	user.bgcolor = "yellow"
	};
	ctr.onmouseout = function(user){
	user.over = "false"
	user.bgcolor = "white"
	};
	};
	app.component("r1",{
	template: '<font color=red>{{"r1"}} {{1+2}} {{$scope}}'
	+'<br> getTest()={{$ctrl.getTest()}}'
	+'<br> getTest2()={{$ctrl.getTest2("Hello")}}</font>'
	+ '<br>users= <!--font color=blue>{{$ctrl.users}} </font-->'
	+ '<li ng-repeat="user in $ctrl.users" '
	+ ' style="background-color:{{user.bgcolor}};cursor:pointer;" '
	+ ' ng-click="$ctrl.count = $ctrl.count+1" '
	+ ' ng-mouseover="$ctrl.onmouseover(user)" '
	+ ' ng-mouseout="$ctrl.onmouseout(user)" '
	+'>{{user}}</li>'
	+ '</font>'
	+ '<br>color= {{$ctrl.color}} '
	+ '<br>count = {{$ctrl.count}} '
	,controller: r1Controller
	,bindings: {
	users: '<' // display user
	,rowclick: '&'
	}
	});
	//==================================================================
	</script>

	</body>
	</html>