我一直在继续学习 angular，现在已经成功地使用了 angular ui bootstrap 分页。我能够显示项目列表以及正确的页数。每当我点击分页时，也会切换到正确的页面。
现在我的问题是，如果用户想要为某个页面添加书签，或者确保用户在刷新浏览器时都停留在同一页面上，我该怎么做。浏览器的地址栏上没有生成任何链接 (href)。我还需要设置路线吗？能否请您发布一些示例，因为它会对我有很大帮助。谢谢。
最佳答案
你需要设置路线，你可以使用routeProvider来完成或 ui router
在这个例子中，我使用路由提供者来演示，但是思路是一样的。
这里我设置了一个以currentPage为参数的路由:
app.config(function($routeProvider) {
$routeProvider
.when('/page/:currentPage', {
templateUrl: "template.html",
controller: PaginationDemoCtrl
})
});
在您的 Controller 中，您可以从 $routeParam 检索当前页面:
$scope.currentPage = $routeParams.currentPage || 1; //default to 1 if the parameter is missing
//load your paged data from server here.
您可以$watch 当前页面的变化并相应地更新位置:
$scope.$watch("currentPage",function(value){
if (value){
$location.path("/page/" + value);
}
})
使用路由，您还需要更新代码以从服务器加载分页数据。我们不会在 currentPage 更改时立即加载数据(在本例中是 $watch 函数)。我们在检索 $routeParam.currentPage 参数时加载分页数据。
应@Harry 的要求，这是另一种通过覆盖 bootstrap html 模板生成 href 链接的解决方案:
app.config(function($routeProvider) {
$routeProvider
.when('/page/:currentPage?', {
templateUrl: "template.html",
controller: PaginationDemoCtrl
})
})
.run(["$templateCache","$rootScope","$location", function($templateCache,$rootScope,$location) {
$rootScope.createPagingLink = function(pageNumber){
return "#" + $location.path().replace(/([0-9])+/,pageNumber);
//Here is a sample function to build href paths. In your real app, you may need to improve this to deal with more case.
}
$templateCache.put("template/pagination/pagination.html",
"<ul class=\"pagination\">\n" +
" <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(1)}}\">{{getText('first')}}</a></li>\n" +
" <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(page - 1)}}\">{{getText('previous')}}</a></li>\n" +
" <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a ng-href=\"{{$root.createPagingLink(page.number)}}\">{{page.text}}</a></li>\n" +
" <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(page + 1)}}\">{{getText('next')}}</a></li>\n" +
" <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(totalPages)}}\">{{getText('last')}}</a></li>\n" +
"</ul>");
}]);
关于javascript - 如何在 Angular UI Bootstrap Pagination 中生成链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16808107/
我分配了以下三个变量:consta={key:true}constb={key:false}constc={[a]:'1',[b]:'2'}然后当我尝试将以下内容记录到控制台时:console.log(c[a],c[b])我得到了以下信息:22当我认为我应该得到:12为什么我错了，我该如何解决？ 最佳答案 对象只能有字符串(或符号)作为它们的键。如果您尝试使用非字符串，它会被转换为字符串。所以当你设置c[a]为1时，a是一个对象，这意味着它需要被转换成一个字符串。所以你最终将c["[objectObj
我有一个对象数组。我想从数组的数字属性中获取最大值:[{number:1000,name:"Josh"},{number:2000,name:"Joker"},{number:3000,name:"Batman"}]我正在使用此解决方案，但我一直收到NAN:constmax=arr.reduce((a,b)=>Math.max(a.number,b.number));我的目标是获取最大值，然后将其存储在变量中constx={number:3000,name:"Batman"}我如何通过reduce实现它？它似乎只适用
我正在尝试复制数组中的每个元素，但使用的是函数式样式。我目前有这个:["a","b","c"]我得到这个:["a","a","b","b","c","c"]到目前为止，我已经尝试了以下方法，将每个元素映射到一个数组，然后使用flat()获取一维数组。有没有更干净的方法，因为感觉我在滥用map和flat。["a","b","c"].map(item=>[item,item]).flat();有
基本上我们在构造函数中绑定(bind)事件处理函数，或者像下面这样在React类组件中将它们作为箭头函数classTestextendsComponent{constructor(props){super(props);this.state={count:0};this.setCount=this.setCount.bind(this);}setCount(){this.setState({count:this.state.count+1});}render(){return<buttononClick={this.setCount}>Increase</button
网络包版本:4.16.3全部编译成功。我在bundle.css中编译后的代码不是minify。我尝试在text-webpack-plugin中使用minimize:true，但它不起作用。对于编译，我在命令行中使用命令:webpack在我的工作目录中我做错了什么？我的wepback配置:'usestrict'constwebpack=require("webpack");constExtractTextPlugin=require('extract-text-webpack-plugin')module.exports={context:
我需要应用哪个规则来强制导入语句中大括号之间的空格？即代替:import{IPostService}from'./api/IPostService';我要:import{IPostService}from'./api/IPostService'; 最佳答案 我认为这可能是您正在寻找的:"whitespace":[true,"check-module"]check-module-检查导入和导出语句中的空格。 关于javascr
我是第一次学习JavaScript，我想知道为什么我的代码不起作用。我有Python/Django知识。目标:我必须创建一个姓名列表，并且我必须只显示以“B”字母开头的名字。我的脚本:varlistNames=['Paul','Bruno','Arthur','Bert','José']for(variinlistNames){if(i.substr(0,1)==='B'){console.log(i);}}但是这段代码没有显示任何东西。 最佳答案
有React+TypeScript的应用，所有的组件类都要大写，有Component后缀，例如:exportclassFooBarComponentextendsReact.Component{...}应用程序被弹出create-react-application应用程序，即使用Webpack构建。如何强制组件命名与样式指南保持一致，至少对于组件类而言，当存在不一致时会在构建时抛出错误？我相信这不能单独使用TSLint/ESLint来实现。如果应该对TypeScript和JavaScript使用不同的方法，那么针对这两种语言的解决方案会很有帮助。 最佳答案
这个问题在这里已经有了答案:WhatdomultiplearrowfunctionsmeaninJavaScript?(7个答案)关闭4年前。constlogger=store=>next=>action=>{letresultconsole.groupCollapsed("dispatching",action.type)console.log('prevstate',store.getState())console.log('action',action)result=next(action)console.log(
我在vue中有一个数据对象，看起来像这样rows[0{title:"mytitle",post:"myposttext",public:false,info:"someinfo"},1{title:"mytitle",post:"myposttext"public:true,info:"someinfo"},2{title:"mytitle",post:"myposttext"public:false,info:"someinfo"}]然后我复
我分配了以下三个变量:consta={key:true}constb={key:false}constc={[a]:'1',[b]:'2'}然后当我尝试将以下内容记录到控制台时:console.log(c[a],c[b])我得到了以下信息:22当我认为我应该得到:12为什么我错了，我该如何解决？ 最佳答案 对象只能有字符串(或符号)作为它们的键。如果您尝试使用非字符串，它会被转换为字符串。所以当你设置c[a]为1时，a是一个对象，这意味着它需要被转换成一个字符串。所以你最终将c["[objectObj
我有一个对象数组。我想从数组的数字属性中获取最大值:[{number:1000,name:"Josh"},{number:2000,name:"Joker"},{number:3000,name:"Batman"}]我正在使用此解决方案，但我一直收到NAN:constmax=arr.reduce((a,b)=>Math.max(a.number,b.number));我的目标是获取最大值，然后将其存储在变量中constx={number:3000,name:"Batman"}我如何通过reduce实现它？它似乎只适用
我正在尝试复制数组中的每个元素，但使用的是函数式样式。我目前有这个:["a","b","c"]我得到这个:["a","a","b","b","c","c"]到目前为止，我已经尝试了以下方法，将每个元素映射到一个数组，然后使用flat()获取一维数组。有没有更干净的方法，因为感觉我在滥用map和flat。["a","b","c"].map(item=>[item,item]).flat();有
基本上我们在构造函数中绑定(bind)事件处理函数，或者像下面这样在React类组件中将它们作为箭头函数classTestextendsComponent{constructor(props){super(props);this.state={count:0};this.setCount=this.setCount.bind(this);}setCount(){this.setState({count:this.state.count+1});}render(){return<buttononClick={this.setCount}>Increase</button
网络包版本:4.16.3全部编译成功。我在bundle.css中编译后的代码不是minify。我尝试在text-webpack-plugin中使用minimize:true，但它不起作用。对于编译，我在命令行中使用命令:webpack在我的工作目录中我做错了什么？我的wepback配置:'usestrict'constwebpack=require("webpack");constExtractTextPlugin=require('extract-text-webpack-plugin')module.exports={context:
我需要应用哪个规则来强制导入语句中大括号之间的空格？即代替:import{IPostService}from'./api/IPostService';我要:import{IPostService}from'./api/IPostService'; 最佳答案 我认为这可能是您正在寻找的:"whitespace":[true,"check-module"]check-module-检查导入和导出语句中的空格。 关于javascr
我是第一次学习JavaScript，我想知道为什么我的代码不起作用。我有Python/Django知识。目标:我必须创建一个姓名列表，并且我必须只显示以“B”字母开头的名字。我的脚本:varlistNames=['Paul','Bruno','Arthur','Bert','José']for(variinlistNames){if(i.substr(0,1)==='B'){console.log(i);}}但是这段代码没有显示任何东西。 最佳答案
有React+TypeScript的应用，所有的组件类都要大写，有Component后缀，例如:exportclassFooBarComponentextendsReact.Component{...}应用程序被弹出create-react-application应用程序，即使用Webpack构建。如何强制组件命名与样式指南保持一致，至少对于组件类而言，当存在不一致时会在构建时抛出错误？我相信这不能单独使用TSLint/ESLint来实现。如果应该对TypeScript和JavaScript使用不同的方法，那么针对这两种语言的解决方案会很有帮助。 最佳答案
这个问题在这里已经有了答案:WhatdomultiplearrowfunctionsmeaninJavaScript?(7个答案)关闭4年前。constlogger=store=>next=>action=>{letresultconsole.groupCollapsed("dispatching",action.type)console.log('prevstate',store.getState())console.log('action',action)result=next(action)console.log(
我在vue中有一个数据对象，看起来像这样rows[0{title:"mytitle",post:"myposttext",public:false,info:"someinfo"},1{title:"mytitle",post:"myposttext"public:true,info:"someinfo"},2{title:"mytitle",post:"myposttext"public:false,info:"someinfo"}]然后我复