Question

我是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>

Answer 1

您可以使用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

Answer 2

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

如何使用angularJs打印数字表？

2 个答案:

或