2015/08/12

AngularJS Filter


程式碼:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script type="text/javascript">
  var myApp = angular.module('myApp', []);
  myApp.controller('myController', function($scope){
    $scope.students = [
    {'Name' : 'Wang', 'En' : 90, 'Ch' : 50, 'Math' : 70},
    {'Name' : 'Chen', 'En' : 30, 'Ch' : 90, 'Math' : 100},
    {'Name' : 'Fang', 'En' : 40, 'Ch' : 60, 'Math' : 10},
    {'Name' : 'Hung', 'En' : 90, 'Ch' : 90, 'Math' : 90}];
  });
 </script>
 <meta charset="utf8"/>
 <title>Filter</title>
</head>
<body>
 <div ng-controller="myController">
  搜尋:<input ng-model="searchText" type="text"><br><br>
  <table>
   <tbody>
    <tr ng-repeat="s in students | filter:searchText">
     <td>
      {{s.Name}}&nbsp
      {{s.En}}&nbsp
      {{s.Ch}}&nbsp
      {{s.Math}}&nbsp
      {{(s.En + s.Ch + s.Math) / 3 | number:2}}
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>

執行結果: