您的位置：首页 > Web前端 > AngularJS

html5_AngularJs简单使用2

2017-10-12 15:25 387 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<style>
.sky {
background-color: lightblue;
}

.tomato {
background-color: coral;
}
</style>

<script>
var app = angular.module("myApp", []);
app.filter("upperCase", function() {
return function(msg, flag) {
return msg.toUpperCase();
}
});
app.filter("subTitle", function() {
//flag是subTitle:后面的   6
return function(msg, flag) {
return msg.substr(0,flag);
}
});
app.controller('myCtrl', function ($scope) {
$scope.name = "";
});
</script>

</head>
<body ng-app="myApp">

<div ng-init="book = [{id: 1, title: 'Java编程思想', isRecommend: false, price: 28}, {id: 2, title: 'C++编程思想', isRecommend: true, price: 32}, {id: 3, title: '高性能MySQL', isRecommend: false, price: 26}]">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>NO</th>
<th>ID</th>
<th>标题</th>
<th>是否推荐</th>
<th>价格</th>
</tr>
<tr ng-repeat="b in book">
<td>{{$index}}</td>
<td>{{b.id}}</td>
<td>{{b.title  | subTitle: 6 | upperCase }}</td>
<td>
<i ng-if="b.isRecommend">是</i>
<i ng-if="!b.isRecommend">否</i>
</td>
<td>{{b.price}}</td>
</tr>

</table>
</div>

<select ng-model="a" style="margin-top: 100px">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>
<h1 ng-class="a">Hello World!</h1>

<div ng-controller="myCtrl">
输入: <input ng-model="name"><br/>

<h1>你输入了: {{name}}</h1>
</div>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航