【AngularJS学习笔记】02 小杂烩及学习总结

表格示例

<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事件

　　<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包含HTML

<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 库。

还需要在Angular应用程序中使用<body ng-app="ngAnimate">

如果已经有ng-app的名字了，那么就加上这行代码

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

在模块定义中 [] 参数用于定义模块的依赖关系。

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

括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

<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天，毕竟快速入门，很有趣的一个库。

posted on 2016-02-26 19:58  韩子卢  阅读(502)  评论(0)  编辑  收藏  举报