no-repate

来源:互联网 发布:java基础类型有哪些 编辑:程序博客网 时间:2024/06/13 08:12
<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<!-- 1.引入AngularJs -->
<script type="text/javascript" src="js/angular.js"></script>
<script>
//2.定义AngularJs应用程序对象
var app = angular.module("MyApp", []);
/* 3.创建控制器:通过app对象的controller方法 */
app.controller("MyCtrl", function($scope) {
//定义数据源
$scope.arr = [{
name: "三星s7",
price: "5000"
},
{name: "三星s8",
price: "7000"
},
{name: "三星s9",
price: "7000"
}];
$scope.num1 = 3;
$scope.num2 = 5;
$scope.haha = "双向数据绑定";
$scope.num1 = 3;
$scope.num2 = 5;
});
</script>
</head>


<body ng-app="MyApp" ng-controller="MyCtrl">
<center>
<p align="center">测试ng-repate指令:
<ul>
<li ng-repeat="x in arr track by $index">角标:{{$index}}值为:{{x}} </li>
</ul>
</p>
<p>测试ng-if指令:
<input type="checkbox" ng-model="if" />
<span ng-if="if">哈哈</span>
</p>
<p>测试ng-show指令:
<span ng-show="if">哈哈</span>
</p>
<p>测试ng-hide指令:
<span ng-hide="if">哈哈</span>
</p>
<p>测试ng-bind指令:
<!--不能绑定到input输入框中 -->
<!--<input type="text" ng-bind="bind" />-->
<span ng-bind="bind">fdadfsas</span>
</p>
<p>测试ng-bind指令:
<!--不能绑定到input输入框中 -->
请输入两个乘数:<input type="number" ng-model="num1" />*
<input type="number" ng-model="num2" />=
<span>{{num1 * num2 }}</span>
</p>
<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.price}}</td>
</tr>
</tbody>
</table>

</center>
</body>


</html>