1
我遇到问题了。我建立一个待办事项列表应用程序，我不能将名为$ scope.tasks的数组保存到LocalStorage。我试了几次，但我不知道该怎么做。 ^）
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="TodoCtrl">
<ion-header-bar align-title="center" class="bar-balanced">
<h1 class="title">Workaholic</h1>
<a class="button button-icon icon ion-android-home" href="#/home"></a>
<a class="button button-icon ion-compose icon" ng-click="newTask()"></a>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<!-- first page -->
<script id="templates/todo.html" type="text/ng-template">
<ion-view view-title="todo">
<ion-content>
<ion-list>
<ion-item ng-repeat="task in tasks" on-hold="edit(task)" on-double-tap="tasks.splice($index, 1)">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<!-- second page -->
<script id="templates/countdown.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content ng-controller="CountCtrl">
<div class="countdown" ng-show="countDown>0"><span ng-if="minutes < 10">0</span>{{minutes}}:<span ng-if="seconds < 10">0</span>{{seconds}}</div>
<div class="row">
<div class="spacer">
</div>
<div class="firstInp">
<label class="item item-input">
<input class="firstInp" id="input1" name="myform" ng-model="mininputVal" type="tel" placeholder="Min.">
</label>
</div>
<div class="secondInp">
<label class="item item-input">
<input class="secondInp" id="input2" name="myform" ng-model="secinputVal" type="tel" placeholder="Sec.">
</label>
</div>
</div>
<div class="countButton1">
<button id="countDownbutton" ng-disabled="countDown > 0 || !secinputVal" class="button button-balanced" ng-click="timerCountdown(mininputVal, secinputVal)">Start Countdown</button>
</div>
<div class="countButton2">
<button id="countDownbutton" ng-disabled="!countDown" class="button button-assertive" ng-click="stopCount()">Stop Countdown</button>
</div>
</ion-content>
</ion-view>
</script>
<!-- 3rd Site -->
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content>
<h4>Hello User! Thank you for testing my App. <br />
Its not Finished at all, so if you have <br />
improvements or Ideas, just tell me them. <br />
<br />
</h4>
<h4>
Contact me: <br />
via Twitter - @JulianTheDev <br />
via Email - [email protected] <br />
</h4>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/todo">To Do's</a>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/countdown">Countdown</a>
<a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/help">Help</a>
</ion-content>
</ion-view>
</script>
<!-- 4th Site -->
<script id="templates/help.html" type="text/ng-template">
<ion-view view-title="help">
<ion-content>
<div class="todohelp">
<h3>To Do</h3>
<h4>• Double Tap to delete a Task!</h4>
<h4>• Hold on the Task to edit it!</h4>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic', 'ionic.utils'])
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
.state('help', {
url: '/help',
templateUrl: 'templates/help.html'
})
.state('countdown', {
url: '/countdown',
templateUrl: 'templates/countdown.html'
})
.state('todo', {
url: '/todo',
templateUrl: 'templates/todo.html'
});
$urlRouterProvider.otherwise("home");
});
app.controller('TodoCtrl', function($scope, $ionicPopup, $ionicListDelegate) {
// Tasks are stored here
$scope.tasks =
[
{title: "Double Tap To Delete a Task!"},
{title: "Hold On The Task to Edit It!"},
];
// Adds A New Task
$scope.newTask = function() {
$ionicPopup.prompt({
title: "New Task",
template: "Enter Task:",
inputPlaceholder: "What do you need to do?",
okText: 'Create Task'
}).then(function(res) { // promise
if (res) $scope.tasks.push({title: res, completed: false});
})
};
// Edits a Task
$scope.edit = function(task) {
$scope.data = { response: task.title };
$ionicPopup.prompt({
title: "Edit Task",
scope: $scope
}).then(function(res) { // promise
if (res !== undefined) task.title = $scope.data.response;
$ionicListDelegate.closeOptionButtons();
})
};
if (localStorage.getItem("task") == null)
{
$scope.todoList = [ {todoText:'Create app', done:false} ];
localStorage.setItem("task", angular.toJson($scope.tasks));
}else
{
//set the todolist from local storage
$scope.todoList = angular.fromJson(localStorage.getItem("task"));
}
})
// Countdown Controller
app.controller('CountCtrl', function countController($scope, $interval, $ionicPopup){
$scope.countDown = 0; // number of seconds remaining
var stop;
$scope.mininputVal = "";
$scope.secinputVal = "";
$scope.minutes = $scope.mininputVal*60;
$scope.seconds = $scope.secinputVal;
// Countdown
$scope.timerCountdown = function(minutes, seconds) {
$scope.buttonclick = document.getElementById('countDownbutton')
$scope.minutes = parseInt(minutes);
$scope.seconds = parseInt(seconds);
// Minutes/Seconds Flow + if above the limit
if ($scope.mininputVal > 99){
$scope.minutes = 99
}
if ($scope.secinputVal > 60){
$scope.seconds = 60
}
if (!$scope.mininputVal){
$scope.minutes = 0;
}
if (!$scope.secinputVal){
$scope.seconds = 0;
}
// set number of seconds until the countdown is ready
$scope.countDown = parseInt($scope.mininputVal*60) + parseInt($scope.secinputVal);
// start the countdown
stop = $interval(function() {
// decrement remaining seconds
$scope.seconds--;
$scope.countDown--;
if ($scope.seconds === -1){
$scope.seconds = 59;
$scope.minutes--;
}
// Stop The Countdown
$scope.stopCount = function() {
//Set the Timer stop message.
console.log("Timer Stopped.")
//Cancel the Timer.
if (angular.isDefined(stop)) {
$interval.cancel(stop);
$scope.countDown = 0;
}
};
// if zero, stop $interval and show the popup
if ($scope.countDown === 0){
$interval.cancel(stop);
$scope.running = false;
console.log("Finished");
var alertPopup = $ionicPopup.alert({
title: 'The Countdown is Finished!',
template: 'Youre Ready To Go!'});
}
},1000,0); // invoke every 1 second
};
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
需要更多疑难解答信息。错误是否被抛出？您是否在浏览器开发工具中检查了localStorage以查看其中的内容？ – charlietfl
我不知道我应该在哪里添加localStorage，每次我都做，我没有得到任何erros，它只是不工作。 –