Question

我在Angular.js中有一个小应用程序。我有一个页面，它从用户那里获得有关房间预订的信息并存储在数据库中，并在需要时加载相同的数据。

我使用Angular select选项加载房间列表。它列出了房间很好，当我存储选定的房间时，它存储得很好。但是当我想在选择列表中显示同一个房间时，它不起作用。

这是我的代码：

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

Answer 1

默认情况下，ngModel通过引用而非值来监视模型。这是将select绑定到作为对象的模型时很重要或集合。但是当我想在选择列表中显示相同的房间时，它不是工作

预计在您的代码中添加房间时，您不会在ng-options的值中添加此房间。此外，当您设置ng-model的{{1}}时，如果您希望轻松完成工作，则应在ng-options值中指定现有引用，因为Angular NgOptions documentation：

如果要预选选项，则会出现一个问题。例如，如果   您将模型设置为一个等于您的对象的对象   集合，ngOptions将无法设置选择，因为   对象不完全相同。因此，默认情况下，您应该始终参考   集合中用于预选的项目，例如：$ scope.selected =   $ scope.collection [3]

另一种解决方案是使用track by子句，因为ngOptions将不是通过引用跟踪项目的标识，而是通过   通过表达式跟踪的结果。例如，如果你的收藏   item有id属性，你可以通过item.id跟踪。

为了避免这个问题，我提出以下想法：当您存储房间时，更新select阵列以添加此房间。
然后，当您想要选择此会议室时，请在rooms中搜索会议室并参考此会议室以设置您的ng-options的ng-model：rooms。
此外，在您的ng-options中，将roomname替换为ng-model="roomname"，以便模型引用房间对象而不是房间名字符串。

以下是在系统中添加房间时必须在代码中添加内容的摘要：

ng-model="r"

Answer 2

您的代码中存在很多问题。

首先你绑定了错误的控制器。

其次，您在下拉值字段中设置了对象，因此您需要使用不带名称的对象进行绑定。

如果您想使用值字段，那么您可以使用ng-options。

见下面的代码可能会对你有用，我想你需要阅读更多有关角度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>

选择Angular.js中的选项不能加载

2 个答案: