前几天看了一个框架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>
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
