ngStorage用法

最新推荐文章于 2021-07-29 14:58:42 发布

hoky_qian

最新推荐文章于 2021-07-29 14:58:42 发布

阅读量7.5k

点赞数 1

分类专栏： angularJS系列文章文章标签： ngStorage 本地存储 angularJS localStorage sessionStorage

本文链接：https://blog.csdn.net/u014743116/article/details/38046045

版权

angularJS系列文章专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ngStorage is an angularJS module, it contains two services: $localStorage and $sessionStorage .

usage:

1.include ngStorage.min.js in your html;
2.then load the module in your appliction by adding it as a dependent module,such as:angular.module('app',['ngStorage']);;
3.include $localStorage and $sessionStorage as your contrller params.

example:

<span style="color:#333333;"><!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>
	<title>ngStorage learning</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="../angular.js"></script>
	<script type="text/javascript" src="ngStorage.min.js"></script>

	<script type="text/javascript">
	var ngModule=angular.module('app',['ngStorage']);
	//---------------------------------------------------
	ngModule.controller('sixthCtrl',function($scope,$localStorage,$sessionStorage) {
		$scope.$storage = $sessionStorage.$default({
			city:{
				cityId:'',
				cityName:''
			},
			cinema:{
				cityLinkId:'',
				cinemaId:'',
				cinemaName:''
			}
		});
		$scope.cityList=[
			{cityId:001,cityName:'广州'},
			{cityId:002,cityName:'西安'},
			{cityId:003,cityName:'北京'}
		];
		$scope.cinemaList=[
		 	{cityLinkId:001,cinemaId:1001,cinemaName:'天娱影城'},
		 	{cityLinkId:001,cinemaId:1021,cinemaName:'UA影城'},
		 	{cityLinkId:002,cinemaId:1002,cinemaName:'恒大影城'},
		 	{cityLinkId:002,cinemaId:1022,cinemaName:'西安影城'},
		 	{cityLinkId:003,cinemaId:1003,cinemaName:'北京影城'}
		];
		$scope.getCity = function(_city){
			$scope.$storage.city = _city;
			alert(_city.cityName);
		}
		$scope.getCinema = function(_cinema){
			$scope.$storage.cinema = _cinema;
			alert(_cinema.cinemaName);
		}
	});

	</script>

	<style type="text/css">
		body{padding:10px;}
	</style>
</head>

<body>
	<div ng-controller="sixthCtrl">
		<select ng-options="city.cityName for city in cityList" ng-model="cityOption" ng-change="getCity(cityOption);" >
            <option value="">请选择城市</option>
        </select>
        <select ng-options="cinema.cinemaName for cinema in cinemaList | filter:{cityLinkId:$storage.city.cityId}" ng-model="cinemaOption" ng-change="getCinema(cinemaOption);" >
            <option value="">请选择影院</option>
        </select>
		<p>{{$storage.city.cityName}}||{{$storage.cinema.cinemaName}}</p>
	</div>
</body>
</html> </span>