前幾天看了一個框架angularjs,不過文檔是英文的,因英文很爛就做只是做了一些簡單的測試如有不當請勿吐槽。
<html xmlns="http://www.w3.org/1999/xhtml" ng-app > <!-- ng-app爲引用angularjs標誌-->
<head><title>AngularJs</title>
<script src="angular.min.js" type="text/javascript"></script> <!-- 引用angularjs-->
<script type="text/javascript">
function PhoneList($scope) {
$scope.phones = [
{ "name": '三星', "disc": 'Good很不錯的手機',"age":10 },
{ "name": 'Nokia', "disc": '我喜歡.', "age": 20 },
{ "name": 'Amoi', "disc": '很好的手機正在用', "age": 30 }
];
$scope.orderprop = 'age';
}
function imageList($scope) {
$scope.Img = [{ "id": 1, "img": '/img/1.jpg'}];
$scope.hello = function(name) {
alert('hello ' + (name || ' World') + '!');
};
function checkValue($scope) {
$scope.cost = 1; //初始化
}
}
</head>
<body ng-controller='PhoneList'> <!--控制器的方法名稱-->
<!--Hello{{'Wold'}}!-->
Your Name :<input type="text" ng-model='key' placeholder='World' />
<hr />
<!--ng-model='key' 綁定一個叫key的模型變量-->
hello {{key||'World'}} <!--雙向綁定。 文本的值變輸出也同時變化-->
<hr />
Search:<input type=text ng-model='query1' />
<div> <!--控制器的方法名稱-->
<ul>
<li ng-repeat='phone in phones|filter:query1'> <!--phones：控制器的方法對象-->
{{phone.name}}
<p>{{phone.disc}}</p>
</li>
</ul>
</div>
<!--<table>
<tr><th> Row number</th></tr>
<tr no-repeat='i in [0,1,2,3,4]'><td> {{i}}</td></tr>
</table>-->
<hr />
Search:<input type=text no-model='query' />
orderby :
<select id="sel" ng-model='orderprop'>
<option value="name">名稱</option>
<option value="age">年齡</option>
<option value="disc">描述</option>
</select>
<ul>
<li ng-repeat='phone in phones|filter:query'>
{{phone.name}} age:{{phone.age}}<p>{{phone.disc}}</p>
</li>
</ul>
<div ng-controller='imageList'>
<ul>
<li ng-repeat='i in Img'>{{i.id}}<p><img ng-src='{{i.img}}' ng-click="hello('xiaomao')" /></p></li></script> <!-- ng-click 爲點擊事件-->
</ul>
</div>
<div ng-controller='checkValue'>
<input type="text" ng-model="cost" required >
發費了： {{cost||1}} <!--雙向綁定。 文本的值變輸出也同時變化-->
</div>
</html>
