CODEWITHSUNDEEP
angularjs
Srinivasan
Srinivasan

Reputation: 303

Select option in Angular.js not working on loading

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>

Upvotes: 2

Views: 1225

Answers (2)

Vijay Maheriya
Vijay Maheriya

Reputation: 1679

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>

Upvotes: 1

davidxxx
davidxxx

Reputation: 131356

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

Upvotes: 2

Related Questions