skyrim mod

Skyrim nothing impossible

Todo Application

author photo

ByNghệ Sĩ Ưu Tú

-

Todo Application

Tạo ứng dụng Todo với Angularjs một cách nhanh chóng và thú vị. Đây là một ứng dụng để ghi nhớ các công việc mình cần phải làm trong thời gian ngắn.

1. Chuẩn bị

Chuẩn bị tài liệu html như sau:

    <html ng-app>               <title>Angular</title>              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">              <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>              <script type="text/javascript" src="js/underscore-min.js"></script>              <script type="text/javascript" src="js/angular.min.js"></script>               <style>                   .done-true {text-decoration: line-through;}               </style>
  • Trên thẻ html tôi có khai báo 1 Directive là ng-app để cho angular biết rằng ứng dụng của chúng ta bắt đầu từ đâu. Nếu không có là không chạy được đâu nhé.( Chả hiểu directive dịch ra là cái gì, thôi chứ để nguyên vậy )
  • Khai báo các thư viện cần dùng như jQuery, underscore, angular. Bình thường chỉ cần có file angular.min.js là đủ rồi nhưng nếu muốn sử dụng thêm các như viện ngoài như jQuery, underscore... thì bạn có thể thêm vào tùy thích.
  • Chưa quan tâm tới thẻ style vội nhé.

2. Tạo giao diện

Sau khi khi báo ng-app và thêm các script cần thiết chúng ta bắt đầu tạo giao diện cho cho ứng dụng.

Cấu trúc các thẻ đơn giản như sau: ( Đây chính là phần View )

<body ng-controller="todoCtrl">       <span id="sort" ng-click="order='name';reverse=!reverse">Sort</span>        <ul class="list-unstyled">             <li ng-repeat="todo in todos | orderBy: order:reverse">                 <input type="checkbox" ng-model="todo.done">                  <span class="done-"></span></li>  </ul>           <form class="form-horizontal">               <input type="text" ng-model="enteredTodo">                 <button ng-click="addTodo()">Add</button>          </form>           <button ng-click="removeComplete()">Remove Complete</button>

3. Code

Trước khi bắt đầu vào phần code chúng ta phân tích phần giao diện html 1 chút.

  • Thẻ ` khai báo 1Directiveng-controller="todoCtrl"`.

TodoCtrl là 1 function ( 1 Controller ) điều hướng và xử lý các tương tác từ phía người dùng. Khai báo từ thẻ body thì phạm vi hoạt động của controller tính từ thẻ mở body đến hết thẻ đóng body.

ng-model bind giá trị của các control như input, textarea, select và 1 thuộc tính của $scope. Trong trường hợp này nó tên là enteredTodo

ng-click tương tự như sự kiện click.

ng-repeat vòng lặp tương tự như vòng lặp foreach trong php.

Khai báo todoCtrl như sau:
function todoCtrl($scope)
{$scope.todos = [{name :'Buiding angular application', done : false},{name: 'Learning English', done : false} ];
$scope
.addTodo = function()
{
$scope.todos.push({name: $scope.enteredTodo, done : false});
$scope
.enteredTodo = ''; }
$scope
.removeComplete = function() {
$scope
.todos = _.filter(
$scope.todos, function(todo) { return !todo.done; });
}
}

$scope là 1 đối tượng toàn cục chứa các hàm và biến chúng ta sử dụng trong controller.

Khi khai báo $scope.todos thì trong View chúng ta chỉ cần gọi todos. Trong ví dụ này todos là 1 mảng các object nên cần dùng ng-repeat để lặp các object trong mảng.

Trong View có khai báo 2 ng-click là addTodo và removeComplete là 1 function vì vậy trong controller cần khai báo 2 thằng này cũng là function.

Các object trong todos có 2 key là name và done.

  • name là tên của todo
  • done là trạng thái hoàn thành ( true|false )

Function addTodo:

  • Chúng ta lưu các Todo vào 1 mảng và mỗi todo là 1 object chính vì vậy để tạo mới 1 todo chúng ta cần tạo ra 1 object với name là value của thẻ input có ng-model="enteredTodo". Giá trị của nó chính bằng $scope.enteredTodo. Sau khi push nó vào mảng thì reset lại giá trị của input bằng rỗng.

$scope.todos.push({name: $scope.enteredTodo, done : false}); $scope.enteredTodo = '';

Function removeComplete:

  • Sử dụng hàm filter của underscore để lọc ra các thẻ đã có trạng thái done:true

$scope.todos = _.filter($scope.todos, function(todo) { return !todo.done; });

Sort:

<span id="sort" ng-click="order='name';reverse=!reverse">Sort</span>

  • Khi click thì set thuộc tính cần sort là name, reverse=!reverse là có cho phép sắp xếp ngược lại không( asc <-> desc ). Nếu không set reverse=!reverse thì khi click nó chỉ sort 1 lần thôi, nếu set thì click phát nữa nó sẽ sort theo chiều ngược lại.

Style các todo khi đánh dấu là đã hoàn thành:

  • Ở thẻ input[type="checkbox"] có khai báo ng-model="todo.done" điều này sẽ can thiệp trực tiếp vào thuộc tính done của từng todo. Nếu checkbox được tích thì done=true và ngược lại done=false.
  • Ở thẻ span nơi mà hiển thị tên các todo chúng ta để 1 class dựa theo trạng thái done của todo để style cho chúng. Nếu done=true thì style text-decoration: line-through;.

DEMO


Fsd14
Share