Angular JS 学习笔记3

最新推荐文章于 2024-08-26 20:25:07 发布

御剑飞天

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量690

点赞数

分类专栏： Angular-JS 文章标签： angular javascript jquery angularjs

本文链接：https://blog.csdn.net/MatchstickMan/article/details/50191511

版权

Angular-JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Angular JS 的好处在于它用极其少的代码实现了用Javascript和Jquery实现的功能。由于AngularJS是建立在MVC的架构上，所以使用data binding可以实现各个组件的无缝连接。
下面以例子说明这个好处
需求：给定一个数字输入，实时以金钱的格式输出到下方。并且做出最基本的validation，即若输入的是非数字，则不显示。
首先看看JQuery的实现

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <title>Jquery</title>
    <script>
    $(function(){
        function formatCost(){
            var cv = Math.floor(parseFloat($('#cost').val()) * 100).toString();
            if (cv.length == 0) {
                cv = '0.00';
            }
            $('#fmtCost').text('$' + cv.substr(0, cv.length-2) + '.' + cv.substr(cv.length-2,2))
        }
        $('#cost').keyup(formatCost);
    });    

    </script>
</head>

<body>
Cost: <input type="text" id="cost" placeholder="cost" />
<p>
This is your cost: <span id="fmtCost"></span>    
</p>

</body>
</html>

JQuery的实现模式是通过元素的标示进行获取，同时也是利用元素的标示进行修改。比如，
通过元素的ID获取：var cv = Math.floor(parseFloat($('#cost').val()) * 100).toString();
通过元素的ID进行值的修改：$('#fmtCost').text('$' + cv.substr(0, cv.length-2) + '.' + cv.substr(cv.length-2,2));

这样的缺点是维护的工作量比较大，而且灵活性欠缺，比如说要修改货币的种类那就非常麻烦了。
那我们再看看Angular JS的实现：

<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <title>Angular JS</title>
</head>

<body>
Cost: <input type="text" ng-model="cost" placeholder="cost" />

<p>
This is your cost: {{cost|currency}}  
</p>
</body>
</html>