牛骨文教育服务平台(让学习变的简单)
博文笔记

ngStorage用法

创建时间:2014-07-22 投稿人: 浏览次数:6619


 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>




声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。