一个简单的AngularJS实例

最新推荐文章于 2021-01-15 14:28:58 发布

我在北京吃泡面

最新推荐文章于 2021-01-15 14:28:58 发布

阅读量982

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/yjf997234900/article/details/8697674

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html ng-app> 
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
        <script type="text/javascript">
        function InvoiceCntl($scope) {
            $scope.qty = 1;
            $scope.cost = 19.95;
        }
        </script>
    </head>
    <body>
        <div ng-controller="InvoiceCntl">
            <b>Invoice:</b>
            <br>
            <br>
            <table>
                <tr><td>Quantity</td><td>Cost</td></tr>
                <tr>
                    <td><input type="integer" min="0" ng-model="qty" required ></td>
                    <td><input type="number" ng-model="cost" required ></td>
                </tr>
            </table>
            <hr>
            <b>Total:</b> {{qty * cost | currency}}
        </div>
    </body>
</html>

运行结果是：

工作原理：

在<html>标签里，我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)你的应用。

我们用<script>标签来加载AngularJS脚本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

通过设置<input>标签里的ng-model属性，AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证：

Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >


Total: {{qty * cost | currency}}

这个{{表达式}}标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器({{ expression | filter }})的组合。AngularJS提供了过滤器来对输入输出数据格式化。

我在北京吃泡面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的AngularJS实例

function InvoiceCntl($scope) { $scope.qty = 1; $scope.cost = 19.95; } Invoice:
复制链接

扫一扫

专栏目录

一个简单的AngularJS实例

“相关推荐”对你有帮助么？