星空网 > 软件开发 > Java

【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

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

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




原标题:【AngularJS学习笔记】02 小杂烩及学习总结

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海运新加坡专线:https://www.goluckyvip.com/tag/33656.html
海运一般的价格:https://www.goluckyvip.com/tag/33657.html
海运一立方多少钱:https://www.goluckyvip.com/tag/33658.html
海运伊朗:https://www.goluckyvip.com/tag/33659.html
欧盟:https://www.goluckyvip.com/tag/3366.html
海运伊朗专线:https://www.goluckyvip.com/tag/33660.html
恐怖游轮2002 恐怖游轮2022:https://www.vstour.cn/a/365178.html
时尚电商平台Meesho拟融资3亿美元!:https://www.kjdsnews.com/a/1836524.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流