Angularjs ng-select выбранное значение не установлено

Question

Я пытаюсь заполнить форму для редактирования списка пользователей.

index.html:

<h1>Users</h1> 
<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Role</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-ng-repeat="u in users" data-ng-click="select(u)"> 
      <td>{{u.id}}</td> 
      <td>{{u.username}}</td> 
      <td>{{u.role.title}}</td> 
     </tr> 
    </tbody> 
</table> 
<form> 
    <label for="inputUsername">Username</label> 
    <input data-ng-model="selectedUser.username" id="inputUsername" type="text"> 
    <select data-ng-model="selectedUser.role" 
      data-ng-options="r as r.title for r in roles" 
      data-ng-change=""> 
    </select> 
</form> 

<pre>{{selectedUser |json}}</pre> 

controllers.js:

angular.module('test-select') 
     .controller('IndexCtrl', 
     ['$scope', 'Restangular', function($scope, Restangular) { 
       $scope.selectedUser = null; 

       Restangular.all("roles").getList().then(function(roles) { 
        $scope.roles = roles; 
       }); 
       Restangular.all("users").getList().then(function(users) { 
        $scope.users = users; 
       }); 

       $scope.select = function(user) { 
        $scope.selectedUser = user; 
       }; 
      }]); 

То, что я хочу добиться того, когда я нажимаю на ряд на столе, я может редактировать выбранный пользователь в форме (для сохранения новых значений). Все работает отлично, за исключением роли пользователей. Если я нажимаю на строку, выбранная роль пользователя не обновляется.

Я думаю, что это связано с тем фактом, что список ролей через ретрансляционный вызов. У кого-нибудь есть идея, как я могу решить эту проблему элегантно?

PS: Я использую угловой 1.2-rc2.

BR, Рене

Answer 1

Следующее решение работает, но я думаю, что это не очень элегантно:

index.html:

<h1>Users</h1> 

<table> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Role</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-ng-repeat="u in users" data-ng-click="select(u)"> 
      <td>{{u.id}}</td> 
      <td>{{u.username}}</td> 
      <td>{{u.role.title}}</td> 
     </tr> 
    </tbody> 
</table> 

<form> 
    <label for="inputUsername">Username</label> 
    <input data-ng-model="selectedUser.username" id="inputUsername" type="text"> 
    <select data-ng-model="selectedUser.role.id" 
      data-ng-options="r.id as r.title for r in roles" 
      data-ng-change="update()"> 
    </select> 
</form> 

controller.js:

'use strict'; 

/* Controllers */ 

angular.module('test-select') 
     .controller('IndexCtrl', 
     ['$scope', 'Restangular', '$resource', function($scope, Restangular, $resource) { 
       $scope.selectedUser = null; 

       Restangular.all("roles").getList().then(function(roles) { 
        $scope.roles = roles; 
       }); 
       Restangular.all("users").getList().then(function(users) { 
        $scope.users = users; 
       }); 



       $scope.select = function(user) { 
        $scope.selectedUser = user; 
       }; 

       $scope.update = function() { 
        var role = _.find($scope.roles, function(role){ 
         return role.id === $scope.selectedUser.role.id; 
        }); 
        $scope.selectedUser.role.title = role.title; 
        $scope.selectedUser.role.bitMask = role.bitMask; 
       } 
      }]);