AngularJS <select> two way data binding for <option> coming from AJAX call

Question

I have this Controller:

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

My 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('WebsiteController@getAddWebsite')}}}" 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>

Updated: Notice that it works in my <input> next to the <select>, but doesn't work in my <header> (only binds once)

So when I click on the add user, the AJAX call will retrieve list of users, and successfully show it in the <select> and by default, selectedUser will be pointing at data[0] which is the first user. But now the two way binding is now bound to data[0] instead. If I change my selection to other user, selectedUser is not updated. But if I update my selectedUser, let's say the name, the name in the dropdown list also change.

I have tried not using the line

$scope.selectedUser = data[0];

but still doesn't work anyway, it is not bound at all though I specify ng-model="selectedUser".

The JSON returned:

[
    {
        "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"
    }
]

Anyone can help me with this? I am trying not to go down the $digest or $apply road if I don't have to.

UPDATE 2 The source of the problem is if I try to print out selectedUser outside of the following ng-repeat in my above HTML:

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

Fiddle to illustrate my problem: http://jsfiddle.net/jofrysutanto/4nfyV/3/

Can you give data which is coming from query

Nitish Kumar
– Nitish Kumar

2013-09-19 06:22:23 +00:00
Commented Sep 19, 2013 at 6:22 — Nitish Kumar
– Nitish Kumar, Commented Sep 19, 2013 at 6:22
you want on change dropdown selected user should be changed

Nitish Kumar
– Nitish Kumar

2013-09-19 06:34:22 +00:00
Commented Sep 19, 2013 at 6:34 — Nitish Kumar
– Nitish Kumar, Commented Sep 19, 2013 at 6:34

Nitish Kumar · Accepted Answer · 2013-09-19 07:42:05Z

5

Try This

HTML:

   <div ng-app="myApp">
    <section class="vbox" ng-controller="WebsiteController">
   <section class="panel animated fadeInDown">
<header class="panel-heading">
  <h3>{{mySelectedUser.last_name}} </small> <!-- Just to test I print it here -->
</header>
<div class="panel-body m-b">
    <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>
                <tr ng-repeat="website in websites">
                    <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-change="abc(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>
</div>

Controller :

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

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

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

$scope.websites = [
    {
        "id": 1,
        "url": "www.google.com",
        "cms": "Wordpress"
    }
    ];

$scope.addUser = function() {
    $scope.adding = true;
   var data = [
   {
     "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"
  }
];
   // UsersService.query({}, function(data) {
        $scope.users = data; // suppose data is coming from UsersService.query
        $scope.selectedUser = data[1];
        $scope.mySelectedUser = $scope.selectedUser ;
  //  });
}
$scope.abc = function(a) {
    $scope.mySelectedUser = a;

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

See DEMO

edited Sep 19, 2013 at 7:42

answered Sep 19, 2013 at 6:37

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JofryHS Over a year ago

Apparently it is my lack understanding of $scope which is the problem. When I print out selectedUser at the very top (still in my WebsiteController), the values doesn't get updated when I change my selection. But when I print out selectedUser just next to the <select> (like your example), it gets updated when I change my selection. Could you probably explain to me?

JofryHS Over a year ago

Thanks for the patience @Nitish, my problem happens if I print out {{selectedUser.last_name}} outside of the <tr> with ng-repeat for websites. My question is updated.

JofryHS Over a year ago

Check my question again. THanks for the fiddle.

Nitish Kumar Over a year ago

make new variable and set it on change of selection

JofryHS Over a year ago

It would be of great help to me if you could profide a fiddle example? :)

|

Zack Argyle · Accepted Answer · 2013-09-19 04:39:14Z

0

The value of the select dropdown options is u.first_name, so either do this:

$scope.selectedUser = data[0].first_name;

Or change it to use ids or something like this.

ng-options="u.id as u.first_name for u in users"
$scope.selectedUser = data[0].id;

answered Sep 19, 2013 at 4:39

Zack Argyle

8,4674 gold badges31 silver badges38 bronze badges

1 Comment

JofryHS Over a year ago

It doesn't work. Logically it makes sense, I thought of the same thing. But now if I print out my $scope.selectedUser to the screen, it is now saying 1 (the first user's id), but when I change the selection of user from dropdown it doesn't change my $scope.selectedUser

Collectives™ on Stack Overflow

AngularJS <select> two way data binding for <option> coming from AJAX call

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related