`

ionic 1.X ui参数

 
阅读更多
AngularJS. UI Router. Optional and Default Params in Route
Let's take a look at example, when we need to show list of items by categories with pagination.
Angular State Route Parameters
All Route parameters are optional by default. That's why you should use trailing slashes in case they are empty. For example, route /items/1 and /items/ will work, but not this one: /items. Let's take a closer look and pass category and page through route params:
state('items-list', {
  url: '/items-list/:cat/:page',
  templateUrl: 'items-list.html',
  controller: function($scope, $stateParams) {
     $scope.category = $stateParams.cat;
     $scope.page = $stateParams.page;
  },
  // default uri params
  params: {
    cat: 'all' ,
    page: 1
  }
});

Then, you're ready to go with links like this:
<a ui-sref="items-list({ cat: 'category-name' })">Category Name</a>

This link will navigate to /items-list/category-name/1.
Angular State Query Parameters
All query parameters are mapped to $stateParams object of UI Router. Let's pass category and page through a query parameters.
state('items-list', {
  url: '/items-list?cat&page',
  templateUrl: 'items-list.html',
  controller: function($scope, $stateParams) {
     $scope.category = $stateParams.cat || 'all';
     $scope.page = $stateParams.page || 1;
  }
});

After that, you may use such links:
<a ui-sref="items-list({ cat: 'category-name' })">Category Name</a>

Such link will navigate to /items-list?cat=category-name.
Angular Non-URL State Parameters
It is possible to pass parameters to state without showing them in the route.
state('items-list', {
  url: '/items-list',
  templateUrl: 'items-list.html',
  controller: function($scope, $stateParams) {
     $scope.category = $stateParams.cat;
  },
  params: {
    cat: 'all' //default category
  }
});

Now if you create such link:
<a ui-sref="items-list({ cat: 'category-name' })">Category Name</a>

It will navigate to /items-list. But category will be available in $stateParams.
In this case, it's not possible to share a link, but it works :-).
If you wan't to share a link with hidden parameters, you may create a button for generating link with full parameters and create a special state that will parse that link and redirect to current state with hidden parameters. Briefly that's it :-)
分享到:
评论

相关推荐

    Ionic.Zip.zip

    《Unity中的C#压缩文件与文件夹:深入理解Ionic.Zip》 在Unity开发过程中,我们经常需要处理文件的压缩和解压操作,以优化资源管理、减小游戏包大小或者进行数据传输。本文将深入探讨使用C#库Ionic.Zip在Unity环境...

    ionic-1.x资源

    这个“ionic-1.x资源”包含了关于Ionic 1.x版本的所有重要文档和必需的资源,对于想要学习或开发Ionic 1.x应用程序的人来说,这是一个非常宝贵的资料库。 首先,我们来看看`ionic-1.x`这个压缩包中可能包含的内容。...

    C# Ionic.Zip.dll以及 解压压缩帮助文档

    本文将深入探讨使用`Ionic.Zip.dll`库在C#中进行文件压缩和解压缩的方法,并提供相关的帮助文档。 `Ionic.Zip.dll`是一个强大的开源库,由DotNetZip项目提供,它允许C#开发者方便地进行ZIP、GZip、BZip2等格式的...

    Ionic.Zip文件

    Ionic.Zip是一个用于.NET框架的开源库,主要用于处理ZIP文件的压缩和解压缩操作。这个库提供了丰富的API,使得开发者能够方便地在C#、VB.NET或其他.NET语言中集成ZIP文件的功能。下面将详细介绍Ionic.Zip库及其核心...

    Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    Ionic3.x对Angular2以上的的路由进一步封装,路由跳转主要是由模块 NavController 来完成的,传递参数主要是由模块 NavParams 来完成的,用法如下 A页面内容: htmll:代码 &lt;button [navPush]="bPage" [navParams]=...

    Ionic.Zip.dll C#创建zip压缩包类库

    1. **创建ZIP文件**:首先,你需要引入`Ionic.Zip`命名空间。然后,通过创建`ZipFile`对象并调用其`AddEntry`方法添加文件或目录到压缩包。最后,使用`Save`方法保存到磁盘。 ```csharp using Ionic.Zip; // 创建...

    Ionic.Zip.dll

    Ionic.Zip.dll 是一个针对 .NET 平台的压缩文件处理库,主要负责处理ZIP格式的压缩和解压缩操作。这个动态链接库(DLL)由 DotNetZip 项目提供,版本号为1.9.1.8,是开发人员在.NET环境中进行文件打包和压缩时常用的...

    Ionic.zip.dll

    1. **文件压缩**: 使用 `Ionic.Zip` 库,开发者可以轻松地将一组文件或目录结构打包成 ZIP 文件。这通常通过创建 `ZipFile` 对象,添加要压缩的文件或目录,然后调用 `Save()` 方法来完成。例如,可以使用 `AddEntry...

    asp.net 使用Ionic.Zip.dll实现文件压缩

    `Ionic.Zip.dll`是一个非常实用的库,它允许开发者在C#或VB.NET环境中轻松地实现文件和目录的压缩与解压,而无需依赖系统自带的ZIP支持。这个库不仅提供了基本的压缩功能,还支持加密、自解压文件等高级特性。下面将...

    Ionic.Zip.rar

    本文将深入探讨如何使用`Ionic.Zip`库在C#项目中进行文件的压缩与解压缩,以及如何将该库引入到项目中。 `Ionic.Zip`是一个功能强大的开源库,由DotNetZip提供,它允许开发者在C#、VB.NET或其他.NET语言中方便地...

    Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

    1.Ionic3.x 页面正向传值 关于正向传值,上一篇文章里面有讲,具体可以看这里://www.jb51.net/article/136302.htm 2.Ionic3.x 页面 pop反向传值,主要有两种方式  1 .利用ES6提供 Promise 对象  2 利用Ionic3.x...

    Ionic.Zip.dll插件

    Ionic.Zip.dll插件,解压和压缩的.dll插件,亲测有效 啊

    Ionic.2.Cookbook.2nd.Edition.epub

    This book will solve all your Ionic-related issues through dedicated recipes that will help you get the best out of Ionic. What you will learn Create custom UIs using Angular 2 directives Make the ...

    C#用Ionic.Zip实现文件、目录的压缩及分卷

    iTextSharp实现PDF的合并与分卷 参见:https://download.csdn.net/download/xjzdr/85519979 C#用Ionic.Zip实现文件、目录的压缩及分卷

    Ionic.zip源码

    【标题】:“Ionic.zip源码”是一套C#编写的开源压缩库,它为.NET开发者提供了方便、高效的压缩和解压缩功能。这个源码库经过验证,可以直接在项目中使用,避免了因引用第三方库出现问题时找不到解决方案的困扰。 ...

Global site tag (gtag.js) - Google Analytics