如何使用angularJs打印数字表

How to print a table of numbers using angularJs?

本文关键字：数字打印 angularJs 何使用更新时间：2023-09-26

我是angularJs的初学者。我想根据插入文本框中的值打印一个数字表。这是我的代码

<html>
    <head>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-controller="number1">
            Number: <input type="text" ng-model="num1"><br>
            <br>
                <p>{{num1}}</p>
        </div>
        <script>
            function number1($scope) {
            for(var i; i<=10;i++){
                $scope.num1 = 1*i
                        }
            }
        </script>
    </body>
</html>

       <div ng-app="" ng-controller="number1">
                Number: <input type="text" ng-model="num1"><br>
                <br>
                <div ng-repeat="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
                    <p>{{num1}}*{{n}}={{num1 * n}}</p>
                </div>
            </div>
    
            <script>
                function number1($scope) {
                    $scope.num1 = "1",
                }
            </script>

或

<div ng-app="" ng-controller="number1">
            Number: <input type="text" ng-model="num1"><br>
            <br>
            <div ng-repeat="n in numbers">
                <p>{{num1}}*{{n}}={{num1 * n}}</p>
            </div>
        </div>
        <script>
            function number1($scope) {
                $scope.num1 = "1",
                $scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            }
        </script>

您可以使用ngRepeat对数组中的每个数字进行迭代，并呈现相乘的结果{{num1 * i}}。

例如，它可能看起来像这样：

<input type="text" ng-model="num1" />
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>*</td>
            <td ng-repeat="i in numbers">{{i}}</td>
        </tr>
        <tr>
            <td>{{num1}}</td>
            <td ng-repeat="i in numbers">{{i*num1}}</td>
        </tr>
    </tbody>
</table>

其中numbers在控制器中声明：

$scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

这里有一个小的实验演示：http://plnkr.co/edit/TXKzszn2t6sHHkPNNkqk?p=info