TECHTOGOU

javascript - 如何在 Angular UI Bootstrap Pagination 中生成链接

coder 2024-05-16 原文

我一直在继续学习 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);
     }
  })

Source code

DEMO link

使用路由,您还需要更新代码以从服务器加载分页数据。我们不会在 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>");
}]);

Source code

DEMO link

关于javascript - 如何在 Angular UI Bootstrap Pagination 中生成链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16808107/

有关javascript - 如何在 Angular UI Bootstrap Pagination 中生成链接的更多相关文章

  1. c# - 如何在 C# 静态和非静态方法之间做出决定? - 2

    [编辑]我最初的问题是“为什么要在静态和非静态之间做出决定?两者都做同样的事情......”不幸的是,它被编辑为我真正想避免的C#特定问题。所以,让我做一些补充:当我说接口(interface)时,我指的不是C#-keyword-interface,而是我理解的类似于C++-interface的东西:一组定义良好的函数来操作我的对象。当说削弱我的界面时,我的意思是我有不同的功能(静态/非静态)做同样的事情。当有不同的功能来做同样的事情时,我的界面不再被很好地定义。所以,正如看门人鲍勃所说,我可以实现一个Validate()函数Document.Validate(myDocumentOb

  2. c# - 如何让 ToString() 出现在 Debug 中 - 2

    我想让ToString()在Debug模式下为我控制的类显示。如果这是当您将鼠标悬停在变量上时首先显示的内容,那就太好了。这个有属性吗? 最佳答案 标记你的类(class)[System.Diagnostics.DebuggerDisplay("{ToString()}")]测试:[System.Diagnostics.DebuggerDisplay("{ToString()}")]classMyClass{privatestring_foo="Thisisthetextthatwillbed

  3. c# - 如何从 DataGridView 构建 DataTable? - 2

    我可能正在倒着看这个问题,但我还是很好奇。有没有办法根据DataGridView中当前显示的内容构建DataTable?需要说明的是,我知道您可以执行此操作DataTabledata=(DataTable)(dgvMyMembers.DataSource);但是这包括隐藏的列。我只想从显示的列构建它。希望这是有道理的。所以我最终尝试了几个答案的组合,因为这似乎是最好的。以下是我正在尝试的。基本上我是从数据源创建数据表,然后根据列是否可见向后工作。但是,在它删除一列后,我得到一个Collectionwasmodified;枚举操作可能不会在foreach的下一次迭代中执行。我很困惑,因为

  4. c# - 如何让 EF Core 数据库首先使用枚举? - 2

    我将EFCore与数据库优先方法结合使用,使用“Scaffold-DbContext”命令生成我的DbContext/实体。我如何指示Scaffold-DbContext某个表中的某个字段应该生成代码以使用Enum而不仅仅是int?这就是您过去在常规EF中的做法:https://www.devu.com/cs-asp/lesson-69-mapping-enum-types-entity-properties-framework-designer/例子此枚举已在代码中定义:publicenumStateEnum{Ok=1,Fail=2}这就是Scaffold-DbContext给我的东

  5. c# - 如何验证(特定国家/地区)电话号码 - 2

    一个有效的电话号码包含:少于9个字符以“+”开头只有数字。我正在尝试使用正则表达式,但我才刚刚开始使用它们,而且我并不擅长。到目前为止我的代码是:staticvoidMain(string[]args){Console.WriteLine("Enteraphonenumber.");stringtelNo=Console.ReadLine();if(Regex.Match(telNo,@"^(\+[0-9])$").Success)Console.WriteLine("correctlyentered");elseConsole.Writ

  6. c# - 如何在 Winform 中使用多线程? - 2

    我是多线程新手。我有一个带有标签和进度条的winform。我想显示处理结果。首先,我使用Application.DoEvents()方法。但是,我发现表格很僵硬。然后我在MSDN上阅读了一些关于多线程的文章。其次,我使用BackgroundWorker来完成它。this.bwForm.DoWork+=(o,arg)=>{DoConvert();};this.bwForm.RunWorkerAsync();表单不会卡住,我可以在处理时拖放。不幸的是,它会抛出InvalidOperationException。所以我必须使用这个。Control.CheckForIllegalCros

  7. c# - 如何捕捉 C# .NET 窗体上的按键 - 2

    我有一个包含很多控件的父窗体。我想要做的是过滤该表单的所有按键。问题在于,如果焦点位于窗体上的控件之一,那么父窗体将无法获得按键事件,那么我该如何捕获按键按下事件呢? 最佳答案 在您的表单上将KeyPreview设置为true,您将捕捉到它们:MSDN 关于c#-如何捕捉C#.NET窗体上的按键,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/3001237/

  8. c# - 如何使用 SharpSSH 以编程方式从 SFTP 服务器删除文件? - 2

    如何使用TamirGal的SharpSSH从SFTP服务器删除文件?我已经能够完成除删除之外的其他功能。 最佳答案 SshExec类对我不起作用,但一点反射魔法起作用了:varprop=sftp.GetType().GetProperty("SftpChannel",BindingFlags.NonPublic|BindingFlags.Instance);varmethodInfo=prop.GetGetMethod(true);varsftpChannel=methodInfo.Invoke(sftp,null)

  9. c# - 在没有 NativeMethods 的情况下,如何找到给定 hWnd 的窗口的位置/位置? - 2

    我目前正在使用WatiN,发现它是一个很棒的Web浏览自动化工具。但是,截至上一个版本,它的屏幕捕获功能似乎有所欠缺。除了一些thisStackOverflowquestion之外,我已经想出了一个可行的解决方案来从屏幕上捕获屏幕截图(独立生成类似于codebyCharlesPetzold的代码).不幸的是,缺少一个组件:实际窗口在哪里?WatiN方便地向您提供浏览器的hWnd,因此我们可以(通过这个简化的示例)设置为从屏幕复制图像,如下所示://browseriseitheranWatiN.Core.IEoraWatiN.Core.FireFox...IntPtrhWnd=brows

  10. c# - 如何摆脱选中的列表框选择突出显示效果? - 2

    当在选中的列表框中单击一个项目时,它会突出显示。我怎样才能防止这种突出效果?我可以连接到SelectedIndexChanged事件并清除选择,但突出显示仍然发生并且您会看到一个光点。事实上,如果您按住鼠标单击,在单击复选框区域后从未松开它,则所选内容会一直突出显示,直到您释放鼠标按钮。我基本上想完全摆脱这种突出显示效果。 最佳答案 使用以下内容:privatevoidcheckedListBox1__SelectedIndexChanged(objectsender,EventArgse){checkedListBox1.Clea

随机推荐

  1. c# - 如何使用 SharpSSH 以编程方式从 SFTP 服务器删除文件? - 2

    如何使用TamirGal的SharpSSH从SFTP服务器删除文件?我已经能够完成除删除之外的其他功能。 最佳答案 SshExec类对我不起作用,但一点反射魔法起作用了:varprop=sftp.GetType().GetProperty("SftpChannel",BindingFlags.NonPublic|BindingFlags.Instance);varmethodInfo=prop.GetGetMethod(true);varsftpChannel=methodInfo.Invoke(sftp,null)

  2. c# - VB 的 "Dim"语句在 C# 中的等价物是什么? - 2

    拿起C#,除了示例之外,似乎找不到任何有用的引用。那么,C#中的Dim是什么? 最佳答案 在VB中,Dim声明了一个特定类型的变量(或者变量类型,如果你没有指定的话)。如果您DimxasFoo,这将声明一个名为x的Foo类型的变量。在C#中,等同于声明类型后跟变量名,如下所示:Foox;inti;您也可以在同一步骤中分配:Foox=newFoo();inti=6;C#支持类型推断,所以你也可以这样做://Compilerinferstypeofxandibasedonthisassignment.varx=newFoo();//xi

  3. c# - 使用 C# 和 LINQ 比较两个大型字符串列表的最佳方法? - 2

    我有一个很大的列表(约110,000个字符串),我需要将其与类似大小的列表进行比较。列表A来自1个系统。列表B来自一个SQL表(我只能读取,没有存储过程等)查找列表A中不再存在于列表B中的值的最佳方法是什么?在数组中处理100,000个字符串是否很大?谢谢 最佳答案 所以你有两个这样的列表:List<string>listA;List<string>listB;然后使用Enumerable.Except:List<string>except=listA.Except(listB).ToList()

  4. c# - String对象真的是通过引用吗? - 2

    这个问题在这里已经有了答案:Howarestringspassedin.NET?(3个答案)关闭8年前。我一直在学习(新手).NET,我有一些疑问。阅读一本书的例子,我了解到String是对象然后是引用类型。所以,我做了这个测试,结果与我预期的不同:我很好奇,这是一个异常(exception),因为“字符串”是特殊类型吗?classProgram{staticvoidMain(string[]args){SBytea=0;Byteb=0;Int16c=0;Int32d=0;Int64e=0;strings="";Exceptionex=newException();ob

  5. C#:自定义程序集目录 - 2

    假设我们有一个应用程序,它包含一个可执行文件和5个库。通常所有这些都将包含在一个目录中,库将从那里加载。是否可以这样做,例如,我可以将一些库放在一个名为Lib的目录中,而将其余的库放在一个名为Lib2的目录中?这样应用程序目录将只包含可执行文件本身,而其他程序集将包含在各种逻辑目录中。我该怎么做?我想知道如何加载程序集,以及如何构建应用程序将程序集放在正确的目录中。 最佳答案 您可以向您的app.config添加额外的搜索路径,它会在其中查找以加载程序集。例如<runtime><assemblyBindingxml

  6. c# - 在没有 NativeMethods 的情况下,如何找到给定 hWnd 的窗口的位置/位置? - 2

    我目前正在使用WatiN,发现它是一个很棒的Web浏览自动化工具。但是,截至上一个版本,它的屏幕捕获功能似乎有所欠缺。除了一些thisStackOverflowquestion之外,我已经想出了一个可行的解决方案来从屏幕上捕获屏幕截图(独立生成类似于codebyCharlesPetzold的代码).不幸的是,缺少一个组件:实际窗口在哪里?WatiN方便地向您提供浏览器的hWnd,因此我们可以(通过这个简化的示例)设置为从屏幕复制图像,如下所示://browseriseitheranWatiN.Core.IEoraWatiN.Core.FireFox...IntPtrhWnd=brows

  7. c# - 在 Windows 服务中使用 Thread.Sleep() - 2

    我正在编写一个需要长时间休眠的Windows服务(最长休眠时间为15小时,最短时间为30分钟)。我目前正在使用Thread.Sleep(calculatedTime)将我的代码置于sleep模式。Thread.Sleep是最好的选择还是我应该使用计时器?我已经用谷歌搜索了一段时间,但找不到简洁的答案。由于这是一个Windows服务,我不必担心锁定UI,所以我想不出不使用Thread.Sleep的理由。如有任何见解,我们将不胜感激。 最佳答案 我会使用计时器Thread.Sleep,它可能会导致阻塞,从而阻止服务关闭。如果间隔如此广泛

  8. c# - C++ .NET 正在消亡吗? - 2

    我在某处听说微软将把精力集中在C#而不是.NET平台的C++上。由于GUI设计器可用于C#而不是C++,我可以看到这是真的迹象。所以我想知道.NET中的C++是否正在消亡,以及它在未来是否会继续仅次于C#。 最佳答案 如果您在应用程序开发中以.NET框架为目标,那么与C#相比,C++/CLI是二等公民。C#是专为.NET框架设计的语言,同时C++/CLI扩展允许开发人员桥接native代码和托管代码。但是不要将C++与C++/CLI混淆(C++.NET是同一回事...)。C++在内核、游戏、高性能和服务器应用程序(例如SQL服务器)

  9. c# - 如何摆脱选中的列表框选择突出显示效果? - 2

    当在选中的列表框中单击一个项目时,它会突出显示。我怎样才能防止这种突出效果?我可以连接到SelectedIndexChanged事件并清除选择,但突出显示仍然发生并且您会看到一个光点。事实上,如果您按住鼠标单击,在单击复选框区域后从未松开它,则所选内容会一直突出显示,直到您释放鼠标按钮。我基本上想完全摆脱这种突出显示效果。 最佳答案 使用以下内容:privatevoidcheckedListBox1__SelectedIndexChanged(objectsender,EventArgse){checkedListBox1.Clea

  10. c# - Web API2 NinjectWebCommon.cs 没有出现 - 2

    我正在使用VisualStudio2013中的空WebAPIFramework4.5。显然NinjectWebCommon.cs没有出现。我是通过Nuget安装的,注入(inject),Ninject.Web.Common,Ninject.MVC5,Ninject.Web.Common.WebHost,Ninject.Web.WebApi,Ninject.web.WebApi.WebHost但是NinjectWebCommon.cs仍然没有出现。我还需要安装什么?我可以手动添加该文件吗?谢谢 最佳答案 看起来最新的Ninject.W