anjular控制器

WEB前端 waitig 465℃ 百度已收录 0评论

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../kuwenjian/angular.js" ></script>
<script>

var app = angular.module("chen",[]);
app.controller("xu",function($scope){

$scope.pd=true;
$scope.sx=false;
$scope.pp=true;
$scope.arr=[
{name:"张三",age:"15"},
{name:"李四",age:"49"},
{name:"王五",age:"35"}
];

});
</script>
</head>
<body ng-app="chen" ng-controller="xu">
<p>测试ng-repate指令:
<ul>
<li ng-repeat="u in arr track by $index">角标为:{{$index}}的值为:{{u}}</li>
</ul>
</p>

<p>测试ng-if指令
<input type="checkbox" ng-model="pd" />
<span ng-if="pd">我那地方撒地方没事的开发</span>
</p>

<p>测试ng-show指令:
<span ng-show="pp">哈哈</span>
</p>
<p>测试ng-hide指令:
<span ng-hide="sx">哈哈</span>
</p>


<p>测试ng-bind指令:
<!–不能绑定到input输入框中 –>
请输入两个乘数:<input type="number" ng-model="m" />*
<input type="number" ng-model="k" />
<span>{{m * k }}</span>
</p>


<center>
<table border="1px solide blue" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="goods in arr">
<td>{{goods.name}}</td>
<td>{{goods.age}}</td>
</tr>
</tbody>
</table>

</center>

</body>
</html>


本文由【waitig】发表在等英博客
本文固定链接:anjular控制器
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)