Select option in Angular.js not working on loading

Question

I have a small app in Angular.js. I have a page where it gets input from the user about the room booking and stores in database and loads the same data when needed.

I use Angular select option to load rooms list. It lists the rooms fine, and when I store the selected room it's storing fine. But when I want to display the same room in select list, it's not working.

Here is my code:

<script>
        var app = angular.module('myApp', []);
        app.controller('bookingcontroller',function($scope,$http){

            $http.get("../pages/php/getrooms.php")
            .then(function (response) {$scope.rooms = response.data;});

            $scope.insertbooking = function(){      
            $http.post("../pages/php/booking.php", {
                'bookingno' : $scope.bookingno,     
                'bookingdate' : $scope.bookingdate,
                'roomsno' : $scope.rooms.RoomSno        
            })

            .success(function(data,status,headers,config){          
                alert ("success");
            });
            }   


            $scope.loadbooking = function(so){
                $http.get("../pages/php/getbookings.php?loadsno=" + so.booksno)
            .then(function (response) 
            {
                $scope.bookingno = response.data[0].bookingno;
                $scope.bookingdate = response.data[0].bookingdate;

                $scope.roomname.RoomSno = response.data[0].RoomSno;
                $scope.roomname.Room_Name = response.data[0].Room_Name;
            }
        });
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtl">
        <select ng-model="roomname" ng-options="r.Room_Name for r in rooms">

        </select>
    </div>
</body>

$scope.roomname.RoomSno = response.data[0].RoomSno; $scope.roomname.Room_Name = response.data[0].Room_Name; — Srinivasan
– Srinivasan, Commented Dec 20, 2016 at 8:58

davidxxx · Accepted Answer · 2016-12-20 09:47:07Z

By default, ngModel watches the model by reference, not value. This is important to know when binding the select to a model that is an object or a collection. but when i want to display the same room in select list, its not working

It is expected since in your code when you add a room you don't add this room in the values of ng-options. Besides, when you set the ng-model of the select, you should assign an existing reference in the ng-options values if you want to ease your job because from the Angular NgOptions documentation :

One issue occurs if you want to preselect an option. For example, if you set the model to an object that is equal to an object in your collection, ngOptions won't be able to set the selection, because the objects are not identical. So by default, you should always reference the item in your collection for preselections, e.g.: $scope.selected = $scope.collection[3].

Another solution is to use a track by clause, because then ngOptions will track the identity of the item not by reference, but by the result of the track by expression. For example, if your collection items have an id property, you would track by item.id.

To avoid this problematic, I propose the following idea : when you store a room, update the rooms array to add this room.
Then when you want to select this room, search the room in rooms and take the reference of this room to set the ng-model of your ng-options: roomname.
Besides, in your ng-options, replace ng-model="roomname" by ng-model="r" in order that the model reference the room object and not the roomname string.

Here is a snippet of what you have to add in your code when you add a room in your system:

this.addInRooms(response.data[0].RoomSno,response.data[0].Room_Name);
$scope.roomname = findRoom( response.data[0].RoomSno,response.data[0].Room_Name);
...
this.addInRooms = function(sno, name){
   // init your room with its data
   var room = {....};
   this.rooms.push(room);
}
...
this.findRoom = function(sno, name){
    for(var i = 0; i < this.rooms.length; i++){
          var currentRoom = this.rooms[i];
          if(currentRoom.sno == sno && currentRoom.name == name) {
              return currentRoom;
           }
    }
 }

Great :) Without testing, there is always some offset. Don't hesitate to mark the answer as accepted if it has solved your problem.
accepted now. i rated but forgot to click accepted... is there any option is stack overflow to add to my favorites or add circle. i want to connect wid you

Vijay Maheriya · Accepted Answer · 2016-12-20 09:48:06Z

You have lots of issue in your code.

First you have bind incorrect controller.

Second you have set object in dropdown value field so you need to bind with object not with name.

If you want to work with value field then you can use ng-options for that.

See below code may be its will be work for you and i think you need to read more about angular js.

var app = angular.module('myApp', []);
        app.controller('bookingcontroller',function($scope,$http){

            $scope.rooms = [
                {
                    RoomSno: 1,
                    Room_Name: 'Standard'
                },
                {
                    RoomSnoRoomSno: 2,
                    Room_Name: 'Deluxe'
                },
                {
                    RoomSnoRoomSno: 3,
                    Room_Name: 'Double'
                },
                {
                    RoomSno: 4,
                    Room_Name: 'Tower Suite'
                }
            ];
                

                
                $scope.roomname = $scope.rooms[1];
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app="myApp" ng-controller="bookingcontroller">
        <select ng-model="roomname" ng-options="r.Room_Name for r in rooms">

        </select>
    </div>

Collectives™ on Stack Overflow

Select option in Angular.js not working on loading

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related