angular杂集

最新推荐文章于 2024-07-31 16:33:32 发布

weixin_30762087

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SunSong/p/7028161.html

版权

<!DOCTYPE html>
<html>

<input type="text" name="" id="" value="" ng-model="txt"/>
<p>input值：{{txt}}</p>

<input type="num" name="" id="" value="" ng-model="first" ng-init="first=2"/>
<input type="num" name="" id="" value="" ng-model="second"ng-init="second=2"/>
<p>运算{{first*second}}</p>

<p ng-init="points=[1,15,19,2,40]"></p>
<p>第三个值为 {{ points[2] }}</p>

<h3>{{hname}}</h3>

<br />
<button>获取值</button>

{{x.Name+x.Url+x.Url}}
</p>

options
<select ng-init="selectedName = snames[0]" ng-model="selectedName" ng-options="x for x in snames"></select>

repeat

<table>
<tr>
<th>index</th>
<th>name</th>
<th>url</th>
<th>country</th>
</tr>
<tr ng-repeat="x in httptext" style="{{$even?'background-color: #f1f1f1':'background-color:#ccc'}}">
<td>{{ $index + 1 }}</td>
<td>{{x.Name}}</td>
<td>{{x.Url}}</td>
<td>{{x.Url}}</td>
</tr>
</table>

switch
选择一个选项:
<input type="radio" ng-model="myVar1" value="dogs">Dogs
<input type="radio" ng-model="myVar1" value="tuts">Tutorials
<input type="radio" ng-model="myVar1" value="cars">Cars

<div ng-switch="myVar1">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
</div>
</body>

</html>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("ctrl", function($scope, $http) {
$scope.hname = "我是h3";
$scope.snames = ["Google", "Runoob", "Taobao"];
$http.get('angu.json').then(function(response) {
$scope.httptext = response.data.sites;
}, function() {
alert("连接错误")
});

$("button").eq(0).click(function() {
$http({
method: 'GET',
url: 'angu.json'
}).then(function successCallback(response) {
// 请求成功执行代码
$scope.httptext1 = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
})
</script>

转载于:https://www.cnblogs.com/SunSong/p/7028161.html

weixin_30762087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular杂集

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container" ng-app="myapp" ng-controller="ctrl"&...
复制链接

扫一扫