hello.html
<!doctype html>
<html ng-app>
<head>
<script src="./src/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
todo.html - 待辦事項的 sample
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="./src/angular.min.js"></script>
<script src="./todo.js"></script>
</head>
<body ng-controller="TodoCtrl">
<h2>Todo List</h2>
<form ng-submit="addItem()">
<input type="text" ng-model="newItem" name="newItem"/>
<input type="submit" id="submit" value="新增待辦事項"/>
</form>
<ul id="todo">
<li ng-repeat="item in todoList | filter:{isFinish:false}">
<div ng-hide="item.editing">
<input type="checkbox" ng-click="removeItem(item)"/>
<span ng-dblclick="edit(item)">{{item.label}}</span>
</div>
<div ng-show="item.editing">
<input type="text" value="{{item.label}}" ng-model="item.label"/>
<button ng-click="save(item)">儲存</button>
</div>
<!--
<input type="checkbox" ng-click="removeItem(item)">
{{item.label}}
-->
</li>
</ul>
<hr/>
<h2>Finished!</h2>
<ul id="finish">
<li ng-repeat="item in todoList | filter:{isFinish:true}">
{{item.label}}
</li>
</ul>
</body>
</html>
todo.js
function TodoCtrl($scope) {
$scope.newItem = "";
$scope.todoList = [
{label:"買牛奶", isFinish:false},
{label:"繳手機費", isFinish:false},
{label:"看醫生", isFinish:false}
];
$scope.addItem = function() {
if (this.newItem) {
this.todoList.push({label:this.newItem, isFinish:false});
this.newItem = "";
}
}
$scope.removeItem = function(item) {
item.isFinish = true;
}
$scope.edit = function(item) {
item.editing = true;
}
$scope.save = function(item) {
delete item.editing;
}
}
cf :
http://angularjs.org/
http://ithelp.ithome.com.tw/question/10095338
沒有留言:
張貼留言