时间戳

首页 > 解决方案 > 具有angular-ui模态形式的angularjs

angularjs - 具有angular-ui模态形式的angularjs

问题描述

嗨，我是 angularJS 的初学者，我在单击按钮时显示 angular-ui 模态表单并且必须添加新用户，但我真的很困惑如何处理以及如何执行这种情况，我尝试了下面的代码，但它无法正常工作一个帮助我更好的方法来做到这一点

我的要求我想打开模式表单以添加新用户，当我单击保存按钮时，我需要在我的数组中添加该新用户

main.js

    // create the module, pass in modules it depends on
    var app = angular.module('myApp', ['ui.bootstrap']);
    // $modal service is now available via the ui.bootstrap module we passed in to our module
    app.controller('myController', ['$scope', '$uibModal', '$log',
        function ($scope, $uibModal, $log) {
            $scope.newUser = {};
            $scope.info = "";
            $scope.users = [
                { username: "rimon", fullName: "Md. Mamunur Rashid Rimon", email: "rimonmath@gmail.com" },
                { username: "shamim", fullName: "Md. Tamim Hossain", email: "shamim@gmail.com" },
                { username: "tamim", fullName: "Tamim Iqbal", email: "tamim@gmail.com" }
            ];

            $scope.addUser = function () {
                var modalInstance = $uibModal.open({
                    templateUrl: 'add_user.html',
                    controller: 'ModalInstanceCtrl',
                });
                modalInstance.result.then(function (selectedItem) {
                    $scope.selected = selectedItem;
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            }

            $scope.saveUser = function () {
                console.log("Saving...");
                $scope.users.push($scope.newUser);
                $scope.info = "New User Added Successfully!";
                $scope.newUser = {};
            };

            $scope.selectUser = function (user) {
                $scope.clickedUser = user;
            };

            $scope.deleteUser = function () {
                console.log($scope.users.indexOf($scope.clickedUser));
                $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
                $scope.info = "User Deleted Successfully!";
            };

            $scope.clearInfo = function () {
                $scope.info = "";
            };
        }]);


   angular.module('myApp').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance) {
    $scope.saveUser = function () {
        alert("You clicked the ok button.");
        $uibModalInstance.close();
    };

    $scope.close = function () {
        alert("You clicked the cancel button.");
        $uibModalInstance.dismiss('cancel');
    };
});

表单.html

<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">New User Registration</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Username" ng-model="newUser.username">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="newUser.email">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Full Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Full Name" ng-model="newUser.fullName">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveUser();">Save</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="close()">Close</button>
    </div>
</div>

标签： angularjs

解决方案

据我所知，您的问题在于您对 FormController.js 的声明，请尝试更改此代码：

app.controller('ModalInstanceCtrl', ['$scope','$modalInstance',function ($scope, $modalInstance) {
   $scope.close = function () {
       $modalInstance.dismiss('cancel');
    };
  $scope.saveUser = function(){
         //SUBMIT FORM HERE
  }

}]);

对于这个：

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, data) 
{
  var pc = this;
  pc.data = data;

  pc.ok = function () {
    //{...}
    alert("You clicked the ok button."); 
    $uibModalInstance.close();
  };

  pc.cancel = function () {
    //{...}
    alert("You clicked the cancel button."); 
    $uibModalInstance.dismiss('cancel');
  };
});

从您的代码中我注意到：

  1. 您对模态控制器的声明错过了有时需要的主模块应用程序的名称。

  2. 您正在使用 '$modalInstance' 而不是 $uibModalInstance

如需进一步参考，请转到此处。请尝试这些更改，让我知道它是否有效！

推荐阅读