我很难在我的模式中显示“嵌套”[数组] 数据。我能够在我的 View 页面上看到从 url 中获取的所有数据。但是,当我 ng-click 相同的元素以弹出模态以查看模态上的相同信息时,我看不到某些信息。在这种情况下,我不能让员工或开发人员。
angular中的url抓取代码
**controller used is 'HomeController'
**/comments is where my json data is located with 'employees'
being a one-to-many relationship entity in my backend (which might be the issue in my head)
var vm = this;
vm.projects = [];
$http.get('/comments')
.then(function(result) {
console.log(result);
vm.projects = result.data;
});
data
在我的模态模板中使用(不是模态中的工作代码)
<div ng-repeat="data in controller.projects">
<ul ng-repeat="employee in data.employees">
{{employee.name}}
</ul>
</div>
controller
来自<div ng-controller="HomeController as controller">
这个我也试过;
<div ng-repeat="employee in Project.Employees" class="selected-item">
{{employee.name}}
</div>
但不起作用!
如下所示,employees
显示在“正常”页面上。
然而,当我ng-click="editProject(data)"
上面的卡片弹出模态,上面显示的所有其他内容(此处未显示)都会弹出,但员工除外。会不会是路由问题?
基本上,在我弹出模式之前,模板 View 上的一切都完美无缺。这是“模态弹出”代码;
$scope.editProject = function(data) {
$scope.showSelected = true;
$scope.SelectedProject = data;
var fromDate = moment(data.start).format('DD/MM/YYYY LT');
var endDate = moment(data.end).format('DD/MM/YYYY LT');
$scope.Project = {
ProjectID : data.projectID,
Client : data.client,
Title : data.title,
Description: data.description,
Employees: data.employees,
StartAt : fromDate,
EndAt : endDate,
IsFullDay : false
}
$scope.ShowModal()
},
//This function is for show modal dialog
$scope.ShowModal = function(){
$scope.option = {
templateUrl: 'modalContent.html',
controller: 'modalController',
backdrop: 'static',
resolve: {
Project : function () {
return $scope.Project;
},
SelectedProject : $scope.SelectedProject
}
};
ShowModal
中是否有我遗漏的 promise ? resolve
?
同时在 chrome devtools 中,employees
如下图所示,似乎已被“捡起”;
但是当我打开对象时,有趣的是它说数组是空的;
一般来说,我是 Angular 和 Web 开发的新手。如果您需要我透露我的后端或您认为缺少的任何其他代码,请告诉我。我只是认为这是一个 Angular 问题。感谢您的帮助。
最佳答案
您需要将项目作为依赖注入(inject)传递给模态实例 Controller :
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, projects) {
var $ctrl = this;
$ctrl.projects = projects;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss();
};
});
并在你的打开函数中解决它:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($http, $uibModal, $log, $document) {
var $ctrl = this;
$http.get('data.json').then(function(result) {
console.log(result);
$ctrl.projects = result.data;
});
$ctrl.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
projects: function () {
return $ctrl.projects;
}
}
});
};
});
另请注意, Controller 名称是通过 controllerAs
属性传递的,而不是在 HTML 模板中。
关于javascript - Angularjs:如何将特定数据传递给模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40716130/