angularjs将一个对象从ng repeat中获取到不同页面中的控制器
angularjs get a object from ng-repeat to a controller in a different page
我尝试了很多方法,服务,$rootScope,广播。。。
我只想在用户选择的ng repeat中获得对象的一个实例,并将其属性动态地列出到一个新的html页面中。
有人能给我看看这个案子的最佳解决方案吗?到目前为止,我所尝试的一切都出了问题。
我有两个控制器,一个用于页面1,另一个用于第2页,还有一个包含我的列表的服务。
app.service('selectedPost', function() {
var list = { ... };
var post;
return {
getPost: function() {
return post;
},
setPost: function(p) {
post = p;
}
});
app.controller('page2Ctrl', function($scope, selectedPost, $rootScope) {
//tried:
$scope.obj = selectedPost.getPost();
//tried
$scope.obj = {p : selectedPost.getPost() };
//tried:
$scope.obj = $rootScope.pobj;
});
app.controller('pageCtrl', function($scope, selectedPost, $rootScope) {
//I call this method in my page1 html and pass the ng-repeat object as parameter:
//tried:
$scope.selectPost = function(post) {
selectedPost.setPost(post);
};
//tried:
$scope.selectPost = function(post) {
$rootScope.pobj = post;
};
$scope.postList = selectedPost.getPostList();
$scope.totalItems = $scope.postList.length;
$scope.itemsPerPage = 6;
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.pageCount = function () {
return Math.ceil($scope.postList.length / $scope.itemsPerPage);
};
$scope.filter = function(items, groupedBy) {
if (items) {
var finalItems = [],
thisGroup;
for (var i = 0; i < items.length; i++) {
if (!thisGroup) {
thisGroup = [];
}
thisGroup.push(items[i]);
if (((i+1) % groupedBy) === 0) {
finalItems.push(thisGroup);
thisGroup = null;
}
}
if (thisGroup) {
finalItems.push(thisGroup);
}
return finalItems;
}
};
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredItems = $scope.postList.slice(begin, end);
$scope.listFilter = $scope.filter($scope.filteredItems, 2);
});
});
page1.html
<div ng-controller="pageCtrl">
<div class="row" ng-repeat="itemList in listFilter">
<div class="col-md-6" ng-repeat="post in itemList">
....
<input class="button" type="submit" value="More" ng-click="selectPost(post)"/>
....//redirect to page2.html
</div>
</div>
</div>
page2.html文件:
<div ng-controller="page2Ctrl">{{obj.something}}</div>
谢谢!
您正在加载一个完全不同的页面(全页面重载)并实例化一个全新的Angular应用程序
您不能在应用程序之间传递状态并使用服务重新加载,因为每个应用程序/重新加载都会重新实例化服务。
我怀疑您试图在SPA中实现路由(而不是传统的全页加载)。在这种情况下,您应该使用路由模块,如ngRoute
或ui.router
。
例如:
<body ng-app="myApp">
...
<ng-view></ng-view>
...
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
</body>
angular.
module('myApp', ['ngRoute']).
config(function ($routeProvider) {
$routeProvider.
when('/path1', {
templateUrl: '...',
controller: '...'
}).
when('/path2', {...}).
...
}).
service('selectedPost', ...).
controller('...', ...).
...
另请参阅简短演示。
相关文章:
- ROR:如何在不重新加载浏览器的情况下从控制器获取参数
- MVC Razor 从 javascript 视图中的控制器获取值
- 从圣杯控制器获取复选框值
- 尝试使用Backbone.sync从Rails中的动作控制器获取数据-非restful
- 如何在laravel4中从控制器获取数组到ajax函数
- 无法从Angular.js中的控制器获取数据
- Symfony2-从路由到控制器获取ID
- 如何在使用映射时从控制器获取数据
- 指令应从模板或控制器获取数据
- 在 angularjs 中从视图到控制器获取值
- Magento通过控制器获取整个页面,而不仅仅是变量值
- 如何从控制器获取表示 ngRepeat 中元素的 HTML 节点的参数
- 我的 Angular 指令没有从控制器获取数据
- 将返回的对象从控制器获取到 javascript 中
- 如何从控制器获取夹具中的记录总数
- 如何从指令中的控制器获取值
- 使用 Angular 的$http时无法从控制器获取 json 信息
- 无法将对象从控制器获取到 JSP
- 从控制器获取结果,使用t4模板生成js intellisense
- 从Typeaahead.js中的symfony控制器获取数据