AngularJS Example

by tamtakoe

HTML

<div ng-app ng-controller="UserListCtrl">
    <ul class="langmenu langmenu-area">
        <li ng-repeat="user in users" ng-controller="UserItemCtrl" ng-model="users">
            <input value="{{user.name}}" ng-model="user.name"/>
        </li>
    </ul>
    <div>
        Последнее изменение: {{last.name}}
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<style>

JavaScript

function UserListCtrl($scope) {
    $scope.users = [{name: 'Oleg', age: 27},
                    {name: 'Diana', age: 25},
                    {name: 'Bob', age: 30}];
    $scope.last = {name: '—'};
}
function UserItemCtrl($scope) {
    $scope.$watch('users[$index]', function(newValue, oldValue, scope) {
        if (newValue === oldValue) return;
        $scope.last.name = $scope.users[$scope.$index].name;
        //Мы используем параметр 'name' из объекта 'last', чтобы Angular, не найдя 'last'
        //в текущей области видимости стал бы искать в родительской (где объявлен объект 'last')
        //Если бы мы задавали 'name' напрямую ($scope.name = '—'), то Angular просто создал бы
        //такой параметр в дочерней области видимости, перекрыв им значение из родительской области
    }, true);
}