angularJS学习小记(1)----99乘法表

来源：互联网发布：淘宝文案策划怎么样编辑：程序博客网时间：2024/06/11 09:57

最近看到AngularJS挺火的,试着接触了一下,结果就深深的迷上了.

刚弄懂双向绑定,写了个99乘法表,展示一下AngularJS的魅力

<!doctype html><html lang="en"><head>  <title>99乘法表</title></head><body><script src="angular.js"></script><table ng-app>    <tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7,8,9]">    <td ng-repeat="j in [1, 2, 3, 4, 5, 6, 7,8,9]">{{i*j}}</td>    </tr></table></body></html>

下面是m*n乘法表,输入框里随便输...

<!doctype html><html lang="en" ng-app="mn"><head>  <title>{{m}}*{{n}}乘法表</title></head><body><script src="angular.js"></script> input m: <input ng-model="m" ng-init="m=9"> input n: <input ng-model="n" ng-init="n=9"><table>    <tr ng-repeat="i in [] | range:m">    <td ng-repeat="j in [] | range:n">{{i*j}}</td>    </tr></table><script type="text/javascript">angular.module('mn', []).filter('range', function() {    return function(input, total) {        total = parseInt(total);        for (var i=1; i<=total; i++)            input.push(i);        return input;    };})</script></body></html>

点这里查看效果

0 0