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

ngAnimate 模型能够添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，可是 ngAnimate 会监测事件，相似隐藏显示 HTML 元素，若是事件发生 ngAnimate 就会使用预约义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

由于目的也只是入门而已，短时间内也不会应用起来，因此写了这些就直接结束了。

虽然以为很突兀，可是确实没什么内容好写的。

花费的时间为3天，毕竟快速入门，颇有趣的一个库。