Question

我有一个使用网络服务填写数据的大表单。这就是我所有的工作。在我的主要index.html：

<div id="showInfo" ">
            <div ng-include src="'people.html'" ng-controller="PeopleController as people"  > 
            </div>
        </div>

获取人员信息的控制器，people.js

    this.getPeople = function() {
        $scope.information = this;
        $http.get('myurl').success(function(data) {

            $scope.information.info =data;      
            console.log("Success");
        });
    }
}]);

在people.html中，我有一个使用ng-repeat的表来显示一些始终可见的特定属性。

<div class="container">
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Something 1</th>
                <th>Something 2</th>
                <th>Something 3</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in people.info">
                <td>{{person.somethintwo}}</a></td>
                <td>{{person.somethinfive}}</td>
                <td>{{person.somethinthree}}</td>
                <td><button class="btn btn-default"
                        ng-click="getPersonInformation(person)">More
                        Details</button></td>
                <div id="showModal">
                    <div ng-include src="'deviceForm.html'"
                        ng-controller="FormController as formcontrol"></div>
                </div>
            </tr>
        </tbody>
    </table>
</div>

现在我想要的是，点击更多信息时，会弹出一个模态窗口，显示包含20个条目的表单。然后应该有一个ng-submit功能，用于将更新的数据发送到服务器。我也有表格和控制器来处理表格。

$scope.getPersonInformation(person) = function (person) {
    // I can retrieve information here of the person but want it to be displayed in a modal window on pop up

        };

我尝试按照一些链接但无法使模态窗口正常工作。

[http://plnkr.co/edit/DNHT1ekB12rlC9KSGzUU?p=preview]

[http://jsfiddle.net/alexsuch/RLQhh/]

[http://jsfiddle.net/hasan2002/huspb8to/]

如果有人能指导我会很棒。此外，在这些链接中，提到在模态指令中创建模板。我有一个很大的形式，我是否需要将整个表单的结构作为模板的价值？在我的people.html中，我为我的表单模板添加了一个ng-include。不是所需要的。

Answer 1

现在我想要的是点击更多信息，一个模态窗口应弹出显示我的表格，包含20个条目。

将模态服务（$uibModal）注入主控制器（PeopleController）
要触发模态窗口，您只需要使用一些正确的选项调用方法$uibModal.open，您的代码应如下所示：

$scope.getPersonInformation(person) = function (person) {
  var modalOptions = {
      templateUrl: 'deviceForm.html',
      controller: 'FormController',
      controllerAs: 'formcontrol',
      // here you pass your `person` object to the modal controller
      // [ along with any other piece of data if you want ;) ]
      resolve: {
        person: function () {
          return person;
        }
      }
  };
  $uibModal.open(modalOptions);
};

使用resolve传递给模态控制器的任何对象都必须注入控制器，对于您的情况，FormController应该是这样的：

// here you inject `person` (that were passed using `resolve`) to `FormController`
yourAngularModule.controller('FormController', ['$scope', 'person', function($scope, person) {
  $scope.person = person;
}]);

最后，现在您可以在模板中显示person对象的信息，模板可以是远程文件或嵌入式脚本，如下所示：

<script type="text/ng-template" id="deviceForm.html">
<div class="modal-header"> bla bla </div>
<div class="modal-body"> 
  {{person}}
</div>
</script>

对于嵌入式脚本，我喜欢将它们放在页面底部，而且你只需要一个嵌入式脚本，不需要将模板放在ng-repeat构造中，模板每次都被实例化Angular并填充了传递的person对象，这就是为什么它被称为模板！

注意：删除此div <div id="showModal">

然后应该有一个用于发送更新数据的ng-submit功能服务器。我也有表格和控制器来处理表格

直截了当，表格和其他提交内容应该在deviceForm.html编码，如果我理解你的话，我想是这样的：D，不要犹豫与我讨论解决方案！

使用角度

1 个答案: