angularjs 는 localstorage 와 결합 하여 간단 한 비망록 을 완성 합 니 다.

준비 작업
bower 로 필요 한 js 설치 하기:

bower install angular
bower install angular-local-storage

html 에서 bower 참조components 에서 대응 하 는 js 파일:

<script src="js/angular.min.js"></script>
<script src="js/angular-local-storage.js"></script>

설명: npm 도 가능 합 니 다. 해당 js 파일 을 직접 다운로드 하거나 cdn 으로 도 ok...
angularjs Directive 를 통 해 index. html 확장
angular 전체 페이지 연결:

<html ng-app="todoApp">

body 의 데 이 터 는 TodoController 에서 제어 합 니 다.

<body ng-controller="TodoController">

메모 추가 form:

<form ng-submit="add()">
	<input placeholder="What you want to do..." type="text" ng-model="todoItem" name="totoItem">
	<input type="submit" id="submit" value="add">
</form>

form 양식 을 제출 할 때 ng-submit 실행 add() 방법, 입력 상자 의 내용 ng-model 을 통 해 todoItem 과 연결 하여 사용:

...$scope.todoItem...

메모 목록 추가
각 메모 에 포 함 된 정보: 내용 content, 날짜 creDate, 삭제 버튼.

<ul>
	<li ng-repeat="todo in todoList">
		<time>{ {todo.creDate} }</time>
		<input type="text" ng-model="todo.content">
		<span>{ {todo.content} }</span>
		<input type="button" value="remove" ng-click="remove($index)">
	</li>
</ul>

ng-repeat 각 메모 리 를 순환 출력 하 는 데 사용 되 며, ng-model 현재 input 의 값 인 메모 내용 content 을 지정 합 니 다. ng-click 단 추 는 remove 방법 과 연 결 됩 니 다.
todo.js
설명 앱

var todoApp=angular.module('todoApp',[]);

정의 컨트롤 러

todoApp.controller('TodoController', function($scope) {
	...
});

정의 todoList

$scope.todoList = [];

add 방법

$scope.add = function() {
	//        
    if ($scope.todoItem) {
    	//        
        var todoInfo = {};
        //        ：        
        todoInfo.creDate = new Date().getMonth() + '/' + new Date().getDate();
        todoInfo.content = $scope.todoItem;
        todoInfo.status = 'active';

        //  todoInfo   todoList  
        $scope.todoList.unshift(todoInfo);
    }
}

remove 방법

//   index     1     
$scope.remove = function(index) {
    $scope.todoList.splice(index, 1);
}

todo. js 를 개조 하여 localstorage 를 사용 하여 지속 화 합 니 다.
두 가지 사고방식:

각각 remove(index) 조회, 추가, 삭제 시 동기 화 작업 $scope.todoList;

감청 localstorage 이 바 뀌 었 을 때 $scope.todoList 값 을 $scope.todoList 에 부여 합 니 다.

첫 번 째 방법 은 분명히 번 거 로 웠 지만 그 때 는 몰 랐 습 니 다 localstorage 감청 이 가능 합 니 다. 여기 서 사용 합 니 다 $scope.$watch.
localstorage 모듈 추가

var todoApp=angular.module('todoApp',['LocalStorageModule']);
...

controller 에 전송 서비스

todoApp.controller('TodoController', function($scope, localStorageService) {
...

localstorage 에서 get 데이터 가 비어 있 지 않 으 면 할당 $scope.$watch

var todoInStore = localStorageService.get('todoList');
$scope.todoList = todoInStore || [];

$scope. todoList 를 감청 하고 변경 할 때 localstorage $scope.todoList 방법 을 사용 합 니 다.

$scope.$watch('todoList', function () {
    localStorageService.set('todoList', $scope.todoList);
}, true);

over
이렇게 해서 캐 시가 정리 되 지 않 으 면 메모 가 계속 되 는 간단 한 비망록 을 실현 했다.
또한 angular local storage 는 개발 자 들 이 사용 할 수 있 는 방법 도 제공 합 니 다.

remove (key): 키 와 일치 하여 localStorage 항목 삭제

clearAll (): 모든 localStorage 삭제

isSupported: 브 라 우 저가 localStorage 를 지원 하 는 지 확인 하기

쿠키: 쿠키 를 조작 하 는 방법 은 localStorage 와 같 습 니 다. set(), set, get, remove 를 포함 합 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

angularjs 는 localstorage 와 결합 하여 간단 한 비망록 을 완성 합 니 다.

좋은 웹페이지 즐겨찾기