为什么Ng Repeat不工作,如果按钮从不同的形式调用
why Ng Repeat is not working if button invoked from a different form?
我有一个html表,其中包含一个ng repeat指令和两个按钮。第一个将打开一个包含新表单的模态,让我创建我的用户,然后当我单击保存时,它将把它添加到列表中。第二个是相同的原始形式,并添加一个用户。
我不明白为什么当我点击第一个不同形式的按钮时,我不能更新ng重复,但第二个是可能的。这是代码:
主页.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>
因为您的模式模板无法访问您的UserController
对象,并且不会显示错误,因为您在模式模板中使用了相同的控制器r,所以作为新Ctrl
重新加载时不会引用父Ctrl
。
然而,最好使用不同的控制器,并将父controller对象传递给模态controller,然后模态主体可以使用所有父对象。因此,您应该将父对象传递给模态控制器。
当您在主文件中包含createUserContent.jsp
弹出文件时,无需在您在模式实例controller : 'Ctrl',
中使用的模式模板中使用ng-controller="UserController as 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>
更多详细信息请访问PLUNKER DEMO
相关文章:
- 如果助手不在,如何从Grunt中的代码中调用任务
- 如果 JS 中的函数是一流的,那么在定义它们之前允许调用它们是什么
- 如果未在file_dialog_complete_handler中调用SWFCUpload startUpload(),
- 如果满足某些条件,如何在不调用模态的情况下首先调用类
- 如果($_SERVER[“REQUEST_METHOD”]=“POST”)条件在ajax调用不同的php文件进行验证和提
- 如果从onclick()内部调用app.open,则它没有响应
- 如果在include文件中使用连接,Jquery ajax调用将不起作用
- 如果我返回表,检查 Ajax 调用是否为 200 OK的最佳方法是什么
- 我的徽章;如果“;为什么没有调用关联的函数
- 如果从文件输入按钮调用 .ajaxSubmit() 时,它是必需的表单
- 如果条件,则在其他操作之后调用 Redux 操作
- 如果我在 window.onbeforeunload 事件上确认是,我如何调用另一个 Java 脚本函数
- 如果我不应该在组件WillUpdate中调用setState,如何更新状态(使用ReactJS)
- 如果多次调用同一函数,如何停止该函数的先前实例
- 如果statusCode不是200,那么从http调用返回什么类型的错误对象
- 如果我传递一个参数,则不会调用javascript函数
- 如果没有警报,我的web服务将不会被调用
- 为什么Ng Repeat不工作,如果按钮从不同的形式调用
- 如果在javaScript中的按钮单击事件中调用两个函数会发生什么
- AJAX调用-如果用户在调用完成之前离开页面会发生什么