2013-10-08 47 views
0

我想填充表單來編輯用戶列表。Angularjs選擇選定的值沒有設置

的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; 
       }; 
      }]); 

我想實現的是,當我連續點擊桌子上我可以編輯(保存新值)一切正常,除了用戶角色。如果我點擊一行,所選用戶角色不會更新。

我認爲這與通過Restangular調用角色列表的事實有關。有沒有人有一個想法如何我可以優雅地解決這個問題?

PS:我正在使用角度1.2-rc2。

BR,劉若英

+0

不應該'select'元素的ng模型是'selectedUser.role.title'? –

+0

不幸的是沒有工作。看到我的解決方案波紋管。 – reen

回答

2

以下解決方案作品,但我認爲這是不是很優雅:

的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; 
       } 
      }]); 
相關問題