AngularJS <select> les deux sens de la liaison de données pour les <option> venant de l'appel AJAX

J'ai ce Contrôleur:

JApp.controller('WebsiteController', function($scope, $resource) {
    var UsersService = $resource('/auth/users', {});

    $scope.adding = false;
    $scope.users = [];

    $scope.addUser = function() {
        $scope.adding = true;

        UsersService.query({}, function(data) {
            $scope.users = data;
            $scope.selectedUser = data[0];
        });
    }

    $scope.cancelAddUser = function() {
        $scope.adding = false;
    }
});

Mon code HTML:

<section class="vbox" ng-controller="WebsiteController">
<section class="panel animated fadeInDown">
<header class="panel-heading">
<h3>{{selectedUser.last_name}} </h3> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
<div class="row text-sm wrapper">
@if (role_admin())
<a href="{{{URL::action('[email protected]')}}}" class="btn btn-sm btn-info"> <i class="icon-plus"></i> New Website </a>
@endif                  
</div>
<div class="table-responsive">
<table class="table table-striped b-t text-sm">
<thead>
<tr>
<th>URL</th>
<th>Assigned to</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Outside this <tr> doesn't work -->
<tr ng-repeat="website in websites">
<td> {{website.url}}</td>
<td>
<span ng-repeat="assigned in website.users"> <span class="label label-info"> {{assigned.first_name}} </span> &nbsp; </span>
<a ng-click="addUser()" ng-hide="adding" class="btn btn-success btn-xs"> Add new </a></span>                               
<select ng-hide="!adding" 
name="myselect" 
ng-model="selectedUser" 
ng-options="u.first_name for u in users">
</select>
<a href="#" ng-hide="!adding" ng-click="cancelAddUser()" class="btn btn-warning btn-xs">Cancel</a>
<input type="text" ng-model="selectedUser.first_name"> <!-- It works here! -->
</td>
<td>
<a href="#" class="btn btn-xs btn-white"> <i class="icon-pencil"></i> Edit </a>
</td>
</tr>
</tbody>                    
</table>
</div>
</div>
</section>
</section>

Mise à jour: Avis qu'il fonctionne dans ma <input> à côté de la <select>, mais ne fonctionne pas dans mon <header> (ne lie une fois)

Alors, quand je clique sur ajouter un utilisateur, l'appel AJAX va récupérer la liste des utilisateurs, et de réussir à le montrer dans la <select> et, par défaut, selectedUser pointe data[0] qui est le premier utilisateur. Mais maintenant, la liaison bidirectionnelle est maintenant lié à data[0] à la place. Si je change de sélection pour les autres utilisateurs, selectedUser n'est pas mis à jour. Mais si je mettre à jour mon selectedUser, disons-le nom, le nom dans la liste déroulante changer aussi.

J'ai essayé de ne pas utiliser la ligne

$scope.selectedUser = data[0];

mais ne fonctionne toujours pas, de toute façon, il n'est pas du tout lié mais je précise ng-model="selectedUser".

Le JSON retourné:

[
{
"id": 1,
"role_id": 1,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "[email protected]",
"username": "admin",
"first_name": "Admin",
"last_name": "Istrator"
},
{
"id": 2,
"role_id": 2,
"created_at": "2013-09-19 05:54:36",
"updated_at": "2013-09-19 05:54:36",
"email": "[email protected]",
"username": "john",
"first_name": "John",
"last_name": "Doe"
}
]

Quelqu'un peut m'aider avec ça? J'essaie de ne pas aller en bas de l' $digest ou $s'appliquent route si je n'ai pas à.

Mise à JOUR 2
La source du problème est que si je tente d'imprimer selectedUser en dehors de la suite de ng-repeat dans mon HTML ci-dessus:

<tr ng-repeat="website in websites"> ...... </tr>

Violon pour illustrer mon problème: http://jsfiddle.net/jofrysutanto/4nfyV/3/

  • Pouvez-vous donner des données qui est à venir à partir d'une requête
  • vous voulez du changement déroulante sélectionnée par l'utilisateur doit être changé
InformationsquelleAutor JofryHS | 2013-09-19