Question

我正在使用Bootstrap在我的网页中显示我的模态。我的数据存储在数据库中。我用ng-repeat从数据库中获取数组数据。我想将room.room_name传递给模态。我怎么能这样做？

HTML：

<tr data-ng-repeat="room in data">
    <td>{{room.room_id}}</td>
    <td>{{room.room_name}}</td>
    <td>{{room.max_pax}}</td>
    <td>{{room.no_booked}}</td>
    <td>
        <button class="btn btn-warning" data-toggle="modal" data-target="#editRoom"></button>
        <button class="btn btn-danger" data-ng-click="delRoom(room.room_id)"></button>
    </td>
</tr>

我的模态：

我想传递room_room.name值并插入输入文本值。我尝试使用ng-value但失败了。

     <div id="editRoom" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Library Discussion Room</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <label for="editName">Room Name: </label>
                        <input type="text" name="editName" data-ng-model="room.name" id="editName" data-ng-value="{{room.room_name}}" />

                        <br />

                        <label for="editMaxPax">Maximum Person: </label>
                        <input type="text" name="editMaxPax" data-ng-model="room.maxPax" id="editMaxPax" value="room.max_pax" />
                        <button type="submit" class="btn btn-default" data-ng-click="editRoom(room)">Edit</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

AngularJS（控制器）：我从数据库中获取值并将其存储到名为＆＃34; data＆＃34;。

的数组中

var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
"use strict";
$routeProvider
        .when("/", {
        templateUrl: "facilities.html"
    });

}]);

app.controller("myCtrl", function ($scope, $http) {
"use strict";
$scope.state = "";

$scope.addRoom = function (room) {
    $http.post("add_library_room.php", {'room_name': room.name, 'max_pax': room.maxPax})
        .then(function () {
            $scope.msg = "Room is inserted into database.";
        });
};

$scope.displayRoom = function () {
    $http.get("view_library_room.php")
        .then(function (response) {
            var data = response.data;
            $scope.data = data;
            console.log(data);
        });
};

$scope.delRoom = function (roomID) {
    $http.post("del_library_room.php", {'room_id': roomID})
        .then(function () {
            $scope.msg = "Room is deleted successfully.";
        });
};

$scope.footer = function (page) {
    if (page === "login") {
        $scope.state = page;
    } else {
        $scope.state = "";
    }
    return $scope.state;
};

});

如何将值传递给bootstrap模式？

0 个答案: