<!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>
<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>
扫一扫
4811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
