AngularJS范围更新问题

Question

I am new to angularjs. Facing a problem like below My markup is like:

<div class="data-list">
    <ul ng-repeat="client in clients | orderBy:orderProp | filter:query">
        <li><a ng-click="update(client)"  data={{client.id}} href="#">{{client.name}}</a></li>
    </ul>
</div>
<div class="clientId">
    {{clientId}}
</div>

And my controller is like:

function ClientListCtrl($scope, $http) {
    $http.get('/dummy-data/clients.json', {
        cache: false
    }).success(function (data) {
        $scope.clients = data.clients;
    });

    $scope.activeClient = {};
    $scope.update = function (selectedClient) {
        $scope.activeClient = angular.copy(selectedClient);
        console.log($scope.activeClient);
    }

    console.log("after click");
    console.log($scope.activeClient);
    // for sorting list 
    $scope.orderProp = '-numberOfUsers';
}

I want when user click "Client Name", {{clientId}} would be updated, but the scope updates it self. And return {} (blank object).

How I can get the {{clientId}} after clicking the clientName?

Thanks in advance.

Answer 1

You controller does not have any property like clientId and you ng-repeat is scoped only to the <ul> tags.

Change

<div class="clientId">
   {{clientID}}
</div>

to

<div class="clientId">
   {{activeClient}}
</div>

Answer 2

You have to replace {{clientId}} with {{activeClient.id}}

I made a simple example based on your code.

HTML

<div ng-app="myApp">
    <div ng-controller="ClientListCtrl">
        <ul ng-repeat="client in clients">
            <li><a ng-click="update(client)" href="#">{{client.name}}</a></li>
        </ul>
        <div class="clientId"><br/>
            Client id: {{activeClient.id}}
        </div>
    </div>
</div> 

JavaScript

var myApp = angular.module('myApp',[]);

function ClientListCtrl($scope, $http) {
    $scope.clients = [
        {"id":1, "name": "client1"},
        {"id":2, "name": "client2"},
        {"id":3, "name": "client3"},
        {"id":4, "name": "client4"},
        {"id":5, "name": "client5"},
        {"id":6, "name": "client6"}
    ];

    $scope.activeClient = {};
    $scope.update = function(selectedClient) {
        $scope.activeClient = angular.copy(selectedClient);
    }
}

see this jsfiddle