<!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>