【AngularJS學習筆記】02 小雜燴及學習總結

時間 2020-06-08

原文原文鏈接

表格示例app

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ $index + 1 }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
        {{ x.Name|uppercase  }}
    </td>
    <td ng-if="$even">
        {{ x.Name }}
    </td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
        {{ x.Country|uppercase}}
    </td> 
    <td ng-if="$even"> 
        {{ x.Country }}
    </td> 
  </tr> 
</table> 
</div>

ng-disabled，ng-show，ng-hide 指令

<div ng-app="" ng-init="mySwitch=true">
　　<p>
　　　　<button ng-disabled="mySwitch">ng-disabled</button>
　　　　<button ng-show="mySwitch">ng-show</button>
　　　　<button ng-hide="mySwitch">ng-hide</button>
　　</p>
　　<p>
　　　　<input type="checkbox" ng-model="mySwitch"/>按鈕
　　</p>
　　<p>
　　　　{{ mySwitch }}
　　</p>
</div>

ng-click事件ide

　　<div ng-app="myApp" ng-controller="personCtrl">
        <button ng-click="toggle()">隱藏/顯示</button>
        <p ng-show="myVar">
            ng-show的狀況: {{name}}
        </p>
        <p ng-hide="myVar">
            ng-hide的狀況: {{name}}
        </p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
            $scope.name="Troy123";
            $scope.myVar = true;
            $scope.toggle = function() {
                $scope.myVar = !$scope.myVar;
            };
        });
    </script>

AngularJS的一些通用API動畫

使用ng-include包含HTMLspa

<body>
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>

AngularJS 使用動畫須要引入 angular-animate.min.js 庫。code

還須要在Angular應用程序中使用<body ng-app="ngAnimate">orm

若是已經有ng-app的名字了，那麼就加上這行代碼htm

var app = angular.module('myApp', ['ngAnimate']);

在模塊定義中 [] 參數用於定義模塊的依賴關係。blog

var app = angular.module("myApp", []);事件

括號[]表示該模塊沒有依賴，若是有依賴的話會在中括號寫上依賴的模塊名字。ip

<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
</head>
<body ng-app="myApp">
<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>