JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div ng-app="App"  >
    <div ng-app ng-controller="ctrl">
      <h1>{{msg}}</h1>
      <table>
        <tr ng-repeat='person in people'>
          <td> ID:
            <input ng-model='person.id'>      
          </td>
             <td> Name:
            <input ng-model='person.name'>      
          </td>
             <td> age:
            <input ng-model='person.age'>      
          </td>
        </tr>
      </table>
    </div>
</div>

JavaScript

angular.module('App', []);
function ctrl($scope){
    $scope.count=0;
    $scope.people = [
        {id:1,name: "bill", "age": 32}, 
        {id:2,name: "jim", "age": 64}, 
        {id:3,name: "ryan", "age": 88}
    ]
    
    $scope.$watch(
        function($scope){
            return $scope.people.map(
                function(obj){
                  // only Name and Age will be watched  
                  return [obj.name, obj.age]
                }
            );
        }, 
        function (newVal) {
            $scope.count++;
            $scope.msg = 'name or age was changed '+ $scope.count;
            console.log('newV', newVal, ' --- ', arguments);
        },
        // Deep watching
        true
    );

}