个人中心
gpt4 book ai didi

javascript - 如果从不同的表单调用按钮，为什么 Ng Repeat 不起作用？

转载 作者：可可西里 更新时间：2023-11-01 02:35:36 26 4
gpt4 key购买 nike

我有一个 html 表，其中包含一个 ng repeat 指令和两个按钮。第一个将打开一个包含新表单的模式，让我创建我的用户，然后当我单击保存时，它将把它添加到列表中。第二个是相同的原始形式，并添加一个用户。

我不明白为什么当我点击不同形式的第一个按钮时我无法更新 ng repeat 但是对于第二个按钮它是可能的。这是代码:

主页.jsp

<body ng-app="myApp">
    <div class="generic-container" ng-controller="UserController as ctrl">
        <div id="createUserContent.jsp" ng-include="createUserContent"></div>
        <table>
            <tr>
                <td>
                    <button type="button" class="btn btn-primary"
                    ng-click="ctrl.openCreateUser()">Create</button>
                </td>
            </tr>
        </table>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID.</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th width="20%"></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="u in ctrl.users">
                    <td><span ng-bind="u.ssoId"></span></td>
                    <td><span ng-bind="u.firstName"></span></td>
                    <td><span ng-bind="u.lastName"></span></td>
                    <td><span ng-bind="u.email"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

用户 Controller .js

'use strict';

App.controller('UserController', function ($scope, UserService, $window, $log, $uibModalStack,
        $uibModal, $rootScope) {
    var self = this;

    self.users = [];

    self.fetchAllUsers = function () {
        console.log('----------Start Printing users----------');
        for (var i = 0; i < self.users.length; i++) {
            console.log('FirstName ' + self.users[i].firstName);
        }
    };
        /**
    this function will not work
    **/
    self.saveUser = function (user) {
        self.users.push(user);
        self.fetchAllUsers();
        $log.log("saving user");
        $uibModalStack.dismissAll();
    };

    /**
    this function works fine
    **/
    self.addNewRow = function () {
        var specialUser = {
                id : 12,
                firstName : 'john',
                lastName: 'travolta',
                homeAddress : {location:'chicago'},
                email : 'trav@email.com'
        };
        self.users.push(specialUser);
        $log.log("saving specialUser");
    };
    self.openCreateUser = function () {

        var modalInstance = $uibModal.open({
                animation : true,
                templateUrl : 'createUserContent',
                controller : 'UserController',
                resolve : {
                    items : function () {
                        return $scope.items;
                    }
                }
            });

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

创建用户内容.jsp

<form role="form" ng-controller="UserController as ctrl" >
    <div class="form-group">
        <label for="FirstName">FirstName</label> <input type="FirstName"
            ng-model="ctrl.user.firstName" class="form-control"
            id="FirstName" placeholder="Enter FirstName" /> <label
            for="lastName">lastName</label> <input type="lastName"
            class="form-control" id="lastName"
            ng-model="ctrl.user.lastName" placeholder="Enter lastName" />
        <label for="email">Email address</label> <input type="email"
            ng-model="ctrl.user.email" class="form-control" id="email"
            placeholder="Enter email" />
    </div>
    <div class="form-group">
        <label for="homeAddressLocation">Home Address</label> <input class="form-control"
            ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"
            placeholder="homeAddressLocation" />
    </div>
    <div class="form-group">
        <label for="SSOId">SSOId</label> <input class="form-control"
            ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" />
    </div>
    <button type="submit" class="btn btn-default"
        ng-click="ctrl.saveUser(ctrl.user)">Save</button>
    <button type="submit" class="btn btn-default">Cancel</button>
</form>

最佳答案

因为您的模态模板无法访问您的 UserController 对象并且不会显示错误，因为您在模态模板中使用了相同的 controllerr 所以重新加载为新的 Ctrl 不引用父 Ctrl。

但是最好使用不同的 controller 并将父 controller 对象传递给模态 controller 然后模态主体可以使用所有父对象。所以你应该将父对象传递给模态 Controller 。

当您在主文件中包含 createUserContent.jsp 弹出文件时，无需在您使用的模态模板中使用 ng-controller="UserController as ctrl" modalInstance Controller :'Ctrl',

喜欢:

var modalInstance = $uibModal.open({
      templateUrl: 'createUserContent.jsp',
      controller: 'ModalCtrl', // ModalCtrl for modal
      controllerAs:'modal', // as modal so no need to use in modal template
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.items;
        },
        parent: function(){ // pass self object as a parent to 'ModalCtrl'
                return self;
        }
      }

和ModalCtrl像:

.controller('ModalCtrl', ['parent', function (parent) {
    this.parent = parent;
}]);

这里使用 ModalCtrl 作为模态作为 modal 所以你可以访问父对象，如:modal.parent.user

模板如下:

<form role="form" >
    <div class="form-group">
    <label for="FirstName">FirstName</label> <input type="FirstName"
ng-model="modal.parent.user.firstName" class="form-control"
id="FirstName" placeholder="Enter FirstName" />
        .....
        ....
    <button type="submit" class="btn btn-default"
ng-click="modal.parent.saveUser(modal.parent.user)">Save</button>
    <button type="submit" class="btn btn-default">Cancel</button>
    </form>

更多详情 Visit PLUNKER DEMO

关于javascript - 如果从不同的表单调用按钮，为什么 Ng Repeat 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36330106/

26 4 0
文章推荐： java - 如何解决 Spring Boot 应用程序中的 FlyWay 许可问题
文章推荐： c++ - boost tcp 接受器和 boost tcp 套接字的 keep_alive 选项
文章推荐： java - 修补 java.base 导致 java.lang.LinkageError
文章推荐： multithreading - 如何使用 Indy 建立双向 TCP 连接？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com