tps2015gh · October 18, 2018 09:22
diff --git a/test_angularJS.html b/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>