如果按钮从不同的形式调用，为什么 Ng Repeat 不起作用? [英] why Ng Repeat is not working if button invoked from a different form?

查看：21
本文介绍了如果按钮从不同的形式调用，为什么 Ng Repeat 不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 html 表，其中包含一个 ng repeat 指令和两个按钮.第一个将打开一个包含新表单的模式，让我创建我的用户，然后当我单击保存时，它会将其添加到列表中.第二个和原来的表单一样，添加一个用户.

我不明白为什么当我单击不同形式的第一个按钮时，我无法更新 ng 重复，但是对于第二个按钮，这是可能的.这是代码:

主页.jsp

<div class="generic-container" ng-controller="UserController as ctrl"><div id="createUserContent.jsp" ng-include="createUserContent"></div><表格><tr><td><button type="button" class="btn btn-primary"ng-click="ctrl.openCreateUser()">创建</button></td></tr><table class="table table-hover"><头><tr><th>ID.</th><th>姓名</th><th>地址</th><th>电子邮件</th><th width="20%"></th></tr></thead><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>

user_controller.js

'use strict';App.controller('UserController', function ($scope, UserService, $window, $log, $uibModalStack,$uibModal, $rootScope) {var self = this;self.users = [];self.fetchAllUsers = 函数 () {console.log('----------开始打印用户----------');for (var i = 0; i < self.users.length; i++) {console.log('名字' + self.users[i].firstName);}};/**此功能将不起作用**/self.saveUser = 函数(用户){self.users.push(user);self.fetchAllUsers();$log.log("保存用户");$uibModalStack.dismissAll();};/**这个功能工作正常**/self.addNewRow = 函数 () {var specialUser = {编号:12，名字:'约翰'，lastName: '特拉沃尔塔',家庭地址:{位置:'芝加哥'}，电子邮件:'trav@email.com'};self.users.push(specialUser);$log.log("保存特殊用户");};self.openCreateUser = 函数 () {var modalInstance = $uibModal.open({动画:真实，templateUrl : 'createUserContent',控制器:'用户控制器'，解决 : {项目:函数(){返回 $scope.items;}}});modalInstance.result.then(function (selectedItem) {$scope.selected = selectedItem;}， 功能 () {$log.info('Modal 在以下时间被驳回:' + new Date());});};self.fetchAllUsers();});

createUserContent.jsp

<标签for="lastName">lastName</label><输入类型="姓氏"类=表单控制"ID=姓氏"ng-model="ctrl.user.lastName" placeholder="输入姓氏"/><label for="email">电子邮件地址</label><输入类型="电子邮件"ng-model="ctrl.user.email" class="form-control" id="email"placeholder="输入电子邮件"/>

<div class="form-group"><label for="homeAddressLocation">家庭住址</label><input class="form-control"ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"placeholder="homeAddressLocation"/>

<div class="form-group"><label for="SSOId">SSOId</label><input class="form-control"ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId"/>

<button type="submit" class="btn btn-default"ng-click="ctrl.saveUser(ctrl.user)">保存</button><button type="submit" class="btn btn-default">取消</button></表单>

解决方案

因为你的模态模板无法访问你的 UserController 对象并且不显示错误，因为你在模态模板中使用了相同的 controller 重新加载为新的 Ctrl 不引用父 Ctrl.

但是最好使用不同的控制器并将父控制器对象传递给模态控制器，然后模态主体可以使用所有父对象.所以你应该将父对象传递给模态控制器.

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

喜欢:

var modalInstance = $uibModal.open({templateUrl: 'createUserContent.jsp',controller: 'ModalCtrl',//模态的 ModalCtrlcontrollerAs:'modal',//作为模态所以不需要在模态模板中使用尺寸:'lg'，解决: {项目:函数(){返回 $scope.items;},parent: function(){//将 self 对象作为父对象传递给 'ModalCtrl'回归自我；}}

和 ModalCtrl 像:

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

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

模板如:

<div class="form-group"><label for="FirstName">FirstName</label><输入类型=名字"ng-model="modal.parent.user.firstName" class="form-control"id="名字"占位符="输入名字"/>.........<button type="submit" class="btn btn-default"ng-click="modal.parent.saveUser(modal.parent.user)">保存</button><button type="submit" class="btn btn-default">取消</button></表单>

更多详情访问 PLUNKER DEMO

I have a html table that contains an ng repeat directive and two button.The first one will open a modal that contains a new form and let me create my user and then when i click save it will add it to the list.The second one is in the same original form and do the add a user.

What i did not understand why when i click on the first button which is in a different form i can not update the ng repeat however for the second one it's possible. This is the code:

homepage.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>

user_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();
});

createUserContent.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>

解决方案

Because of your modal template can't access your UserController object and doesn't show error because you used in modal template same controller so reloaded as new Ctrl doesn't refer parent Ctrl.

However better to use different controller and pass parent controller object to modal controller and then modal body can use all parent object. so you should pass parent object to modal controller.

When you include createUserContent.jsp popup file in your main file then no need to use ng-controller="UserController as ctrl" in your modal template you used in modalInstance controller : 'Ctrl',

like:

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;
        }
      }

and ModalCtrl like:

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

here used ModalCtrl for modal as modal so you can access parent object like: modal.parent.user

template like:

<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>

More details Visit PLUNKER DEMO

这篇关于如果按钮从不同的形式调用，为什么 Ng Repeat 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆