如何使用 angularjs 在 twitter-bootstrap 模态中填充数据

Question

使用：

-推特-Bootstrap

-AngularJs

这是故事

已创建 table：行是使用 "ng-repeat" 动态创建的。第一个单元格（连续）内的数据项有一个点击事件触发 Twitter-Bootstrap 模态出现。模式中的输入字段与 [table] 行中的列相匹配。用户编辑该行中的必要数据。这应该会更新数据库并且更改会立即反映在 table.

中

但是，我无法从 table 获取数据来填充模态字段。

奇怪的是...如果我使用 Twitter-Bootstrap (TBS) 弹出窗口而不是 TBS 模式，一切正常。一切。所有数据都填充在弹出字段中，它是 editable，它实际上保存到数据库，并更新 table 行！但是弹出窗口很糟糕，我被限制使用它们。

使用完全相同的代码，为什么数据不会填充到模式中？显然，这让我相信使用语法相同的代码，弹出窗口和模式的功能不同。但是为什么？

我所做的研究、我在这里以及 TBS 和 AngularJS 上仔细阅读的文档要么过于繁琐，要么完全没有帮助。

总而言之，这是我希望实现的功能：

用户单击 table 行第一个单元格内的数据
（点击）模态出现填充行中的数据（尤其是这个）。
用户可以编辑字段
Save/Update。触发事件可以是 "enter" 或按钮 "on-click" 我不在乎，我只是想让它起作用。

这是代码的要点（弹出窗口有效，模态窗口无效）。

免责声明：我无法让它在这里工作（SO 或 jfiddle）我可能缺少参考。但我知道你们都比我聪明，而且根据我所提供的，我对这个社区有最大的信心，能够找出我做错了什么。

在此先感谢大家的帮助。

<!DOCTYPE html>
<html ng-app="person">
<head>
    <title>HELP ME WITH MODALS</title>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
    <div ng-controller="PersonCtrl">
        <table style="border:1px solid black; padding:3px;">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Favorit Color</th>
                    <th>Favorit Food</th>
                    <th>Favorite Season</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in persons" ng-click="updatePerson(person)">
                    <td data-toggle="modal" data-target="#editModal">{{person.firstName}}</td>
                    <td>{{person.lastName}}</td>
                    <td>{{person.favoriteColor}}</td>
                    <td>{{person.favoriteFood}}</td>
                    <td>{{person.favoriteSeason}}</td>
                    <td>
                        <button popover-template="dynamicPopover.templateUrl" popover-placement="left" popover-title="Edit" ng-click="current.person=person">Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color:#513011;">&times;</span>
                        </button>
                        <h4 class="modal-title" id="editModalLabel">Edit Person</h4>
                    </div>
                    <!--/HEADER-->
                    <div class="modal-body">
                        <form ng-submit="update(current.person)">
                            <div class="form-group">
                                <label for="firstname">First Name:</label>
                                <input name="firstname" type="text" ng-model=current.person.firstName class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="lastname">Last Name:</label>
                                <input name="lastname" type="text" ng-model=current.person.lastName class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="favoritecolor">Favorite Color:</label>
                                <input name="favoritecolor" type="text" ng-model=current.perosn.favoriteColor class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="favoritefood">Favorite Food:</label>
                                <input name="favoritefood" type="text" ng-model=current.perosn.favoriteFood class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="favoriteseason">Favorite Season:</label>
                                <input name="favoriteseason" type="text" ng-model=current.perosn.favoriteSeason class="form-control">
                            </div>
                        </form>
                    </div>
                    <!--/MODAL-BODY-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" ng-click="update(current.person)" class="btn btn-primary" value="Save" />
                    </div>
                    <!--/MODAL-FOOTER-->
                </div>
                <!--/MODAL-CONTENT-->
            </div>
            <!--/MODAL-DIALOG-->
        </div>
        <!--/MODAL-->
    </div>
    <!--/CONTROLLER-->
</body>
</html>


<!-- script for edit popover-->
<script type="text/ng-template" id="popoverTemplate.html">
    <div>
        <form ng-submit="update(current.person)">
            <div class="form-group">
                <label for="firstname">First Name:</label>
                <input name="firstname" type="text" ng-model=current.person.firstName class="form-control">
            </div>
            <div class="form-group">
                <label for="lastname">LastName:</label>
                <input name="lastname" type="text" ng-model=current.person.lastName class="form-control">
            </div>
            <div class="form-group">
                <label for="favoritecolor">Favorite Color:</label>
                <input name="favoritecolor" type="text" ng-model=current.person.favoritecolor class="form-control">
            </div>
            <div class="form-group">
                <label for="favoritefood">Favorite Food:</label>
                <input name="favoritefood" type="text" ng-model=current.person.favoritecolor class="form-control">
            </div>
            <div class="form-group">
                <label for="favoriteseason">Favorite Season:</label>
                <input name="favoriteseason" type="text" ng-model=current.person.favoritecolor class="form-control">
            </div>
            <input type="submit" class="btn btn-default" value="Submit">
            <input type="button" class="btn btn-default pull-right" ng-click="delete(current.schoolTerm)" value="Delete">
        </form>
    </div>
</script>

<script>
    var person = angular.module('person', []);
    personApp.controller('PersonCtrl', [
    function ($scope) {
        var person = [
            {
                'firstName': 'Christine',
                'lastName': 'Smith',
                'favoriteColor': 'Pink',
                'favoriteFood': 'Sushi',
                'favoriteSeason': 'Summer'
            },
            {
                'firstName': 'Dana',
                'lastName': 'Carvey',
                'favoriteColor': 'Yellow',
                'favoriteFood': 'Tomatoes',
                'favoriteSeason': 'Summer'
            },
            {
                'firstName': 'Terry',
                'lastName': 'Gross',
                'favoriteColor': 'Chartreuse',
                'favoriteFood': 'Lasagna',
                'favoriteSeason': 'Spring'
            }
        ];

    }]);
</script>

Answer 1

如果你想在 Twitter bootstrap 中使用模式并来回传递数据，你必须 extend/wrap 使用你自己的指令，我不建议这样做因为已经有指令可以做到这一点。

如果您是 Angular 的新手并且必须使用 bootstrap 考虑使用 Angular Ui Bootstrap ，这是一组自定义指令使用推特 bootstrap.

撰写

如果您不支持 IE8 并且没有承诺使用 Twitter bootstrap，我强烈建议您查看 lumx。

注意：这两个都还处于测试阶段，请谨慎使用。

好的，现在让我们回到你的问题。如果您决定继续使用 Twitter bootstrap，并且一旦安装了 angular ui bootstrap - 很简单，只需按照以下步骤 https://github.com/angular-ui/bootstrap#installation - ，唯一一开始可能会有点混乱的是如何将范围属性从调用者控制器传递到模态。简而言之，你必须在调用者控制器中做这样的事情：

var modalInstance = $modal.open({
templateUrl: 'yourModalTemplate.html',
controller: 'yourModalController',
resolve: {
    itemsFromCallerController: function () {
        return [{ i: 1, i: 2 }];
    }
}

你的模态控制器应该看起来像这样：

angular.module("app").controller('yourModalInstanceController', function ($scope, $modalInstance, itemsFromCallerController, action) {
    $scope.modalHeader = "your modal header";
    $scope.items = itemsFromCallerController;
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

看看这个Plunker

如何使用 angularjs 在 twitter-bootstrap 模态中填充数据

How to populate data in a twitter-bootstrap modal using angularjs

twitter-bootstrap

angularjs

bootstrap-modal