2015/09/29

AngularJS ng-hide ng-show

ng-hide可以隱藏元素
ng-show則可以顯示元素



<!DOCTYPE html>
<html>
<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 ng-app="myApp">
  <div ng-controller="myController">
  搜尋:<input ng-model="searchText" type="text">
  顯示?<input ng-model="isCheck" type="checkbox">
    <div ng-hide="!isCheck" ng-show="isCheck">
      <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>
  </div>
</body>
</html>