如何将表格数据从角度ui引导程序模态传递到视图

用户2016462

我正在创建一个Webapp,我想实现一个添加好友的选项。我已经将添加好友页面创建为带有文本输入字段的模式。我想通过在我的视图页面上显示输入来对此进行测试。如何在我的视图页面上显示这些数据?

这是我目前拥有的

index.html

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>

         <form name = "addFriendForm">
          <input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
          {{ user.name }}
        </form>

        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Add Friend</button>
    <div> Username: {{user.name}}</div>
</div>

我的JavaScript文件:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.user = {name: ""}

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {
      $scope.user.name = user.name;}, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

  $scope.ok = function () {
    $modalInstance.close($scope.user.name);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

plunkr:http ://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

马特

解决-PLunkr

您可以利用modalInstanceresolve属性;这充当模式实例与父控制器之间的链接。

您将对象插入ModalInstanceController,并将其分配给模态实例的范围。

UI Bootstrap解决的工作原理与ngRouter完全相同;因此,如果由于某种原因resolve无法解析对象,则不会打开模式。

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
      return $scope.user;
    }
  }
});

范围-plunkr

另一种可以说是较简单的方法是将父级范围传递给模式。请注意,当前controllerAs在父控制器上使用语法时,这不起作用

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将数据从模态传递到调用角度组件?

将数据传递到角度6中的引导程序模态

引导程序将数据传递到模态

如何将数据从模态视图列表传递到 SwiftUI 中的父视图?

如何将数据传递到角度基础模态$ scope?

如何使用角度ui模态将数据传递到控制器?

如何将数据从AngularJS列表传递到Bootstrap模态?

如何将值从表传递到引导模态到PHP?

Angular-UI引导程序:将值从“触发器”的按钮传递到“模态”的按钮

通过VueJS中的道具将动态数据传递到引导程序的模态

如何以角度将数据从视图传递到布局

如何将表格数据传递到GAS

Angular-UI模态-将数据传递到模态

AngularJS将数据传递到引导模态

将html数据传递到引导模态中的表单

Angular4将数据传递到引导模态

如何将AngularJS自定义指令注入到引导程序预加载的模态中?

如何将数据从viewController传递到swiftUI视图?

如何将数据从视图传递到父布局?

如何将数据从多个模型传递到视图?

单击表的单元格时,如何将数据传递到引导程序模式内的textarea?

如何将数据从引导程序表单传递到 asp .net 核心剃刀页面中的 mockemployeerepo

Nativescript Vue(移动应用程序)-如何将模态列表视图中的选定项目数据传递回主应用程序?

您如何将引导按钮上的数据拉入模态?

AngularJS:如何将数据从引导模态推送到表

从javascript传递数据到引导模态

从按钮传递数据ID到引导模态

如何将输入字段数据从模态传递到react-Native中的容器?

如何将数据传递到Angular ng-bootstrap模态进行绑定