標籤：記事本 not hold src 樣式 type 改變 dash create
這是HTML代碼：
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>NoteBook</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css"><script src="js/angular.min.js"></script></head><body ng-app="Todos"><section class="todoapp" ng-controller="TodosCtrl"><header class="header"><h1>NOTE</h1><form ng-submit="add()"><input class="new-todo" ng-model="todo" placeholdder="You need to do something!!" autofocus></form></header><section class="main"><input class="toggle-all" type="checkbox"><label for="toggle-all">Mark all as complete</label><ul class="todo-list"><li ng-repeat="todo in todos" ng-class="{completed: todo.flag}"><div class="view"><input class="toggle" ng-click="toggle($index)" type="checkbox" ng-checked="todo.flag"><label>{{todo.text}}</label><button class="destroy" ng-click="delete($index)"></button></div><input class="edit" value="Create a TodoMVC template"></li></ul></section><footer class="footer"><span class="todo-count"><strong>{{length}}</strong> item left</span><button class="clear-completed" ng-click="clear()">Clear completed</button></footer></section><script>var Todos = angular.module(‘Todos‘, []);Todos.controller(‘TodosCtrl‘, [‘$scope‘, function ($scope) {// 聲明一個數組，用來儲存待辦事項$scope.todos = [{text: ‘寫日記‘, flag: true},{text: ‘做飯‘, flag: false},{text: ‘洗臉‘, flag: true},{text: ‘刷牙‘, flag: true},];$scope.add = function () {// 向數組中添加資料$scope.todos.push({text: $scope.todo, flag: false});// 清空表單$scope.todo = ‘‘;$scope.length=$scope.count();};// 切換事項狀態（完成/未完成）$scope.toggle = function (index) {// 改變數組中某單元的flag屬性$scope.todos[index].flag = !$scope.todos[index].flag;$scope.length=$scope.count();};// 刪除事項$scope.delete = function(index) {// 將數組中某單元刪除$scope.todos.splice(index, 1);$scope.length=$scope.count();};$scope.clear = function (){for (var i=0 ;i< $scope.todos.length ; i++){if($scope.todos[i].flag==true){$scope.delete(i);$scope.clear();}}};$scope.count=function(){var count=0;for(var i=0;i<$scope.todos.length;i++){if($scope.todos[i].flag==false){count++;}}return count;}$scope.length=$scope.count();}]);</script></body></html>
這是base.css檔案（注意，請用less）
hr {margin: 20px 0;border: 0;border-top: 1px dashed #c5c5c5;border-bottom: 1px dashed #f7f7f7;}.learn a {font-weight: normal;text-decoration: none;color: #b83f45;}.learn a:hover {text-decoration: underline;color: #787e7e;}.learn h3,.learn h4,.learn h5 {margin: 10px 0;font-weight: 500;line-height: 1.2;color: #000;}.learn h3 {font-size: 24px;}.learn h4 {font-size: 18px;}.learn h5 {margin-bottom: 0;font-size: 14px;}.learn ul {padding: 0;margin: 0 0 30px 25px;}.learn li {line-height: 20px;}.learn p {font-size: 15px;font-weight: 300;line-height: 1.3;margin-top: 0;margin-bottom: 0;}#issue-count {display: none;}.quote {border: none;margin: 20px 0 60px 0;}.quote p {font-style: italic;}.quote p:before {content: ‘“‘;font-size: 50px;opacity: .15;position: absolute;top: -20px;left: 3px;}.quote p:after {content: ‘”‘;font-size: 50px;opacity: .15;position: absolute;bottom: -42px;right: 3px;}.quote footer {position: absolute;bottom: -40px;right: 0;}.quote footer img {border-radius: 3px;}.quote footer a {margin-left: 5px;vertical-align: middle;}.speech-bubble {position: relative;padding: 10px;background: rgba(0, 0, 0, .04);border-radius: 5px;}.speech-bubble:after {content: ‘‘;position: absolute;top: 100%;right: 30px;border: 13px solid transparent;border-top-color: rgba(0, 0, 0, .04);}.learn-bar > .learn {position: absolute;width: 272px;top: 8px;left: -300px;padding: 10px;border-radius: 5px;background-color: rgba(255, 255, 255, .6);transition-property: left;transition-duration: 500ms;}@media (min-width: 899px) {.learn-bar {width: auto;padding-left: 300px;}.learn-bar > .learn {left: 8px;}}
最後別忘記引入angular.min.js檔案，以及初始化樣式的index.css檔案（網上有很多）。
AngularJS開發記事本小程式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
