Maison >interface Web >js tutoriel >Application AngularJs : Un petit exemple d'implémentation d'une page d'achat similaire (avec code)

Application AngularJs : Un petit exemple d'implémentation d'une page d'achat similaire (avec code)

不言original: 2018-08-11 14:44:501546parcourir

Le contenu de cet article concerne l'application AngularJs : un petit exemple d'implémentation d'une page d'achat similaire (avec code), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile. .

Écrivez une petite application et maîtrisez AngularJs.

<!DOCTYPE html>
<html ng-app=&#39;myApp&#39;>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="./src/css/index.css" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var myApp=angular.module(&#39;myApp&#39;,[]);//定义一个控制器
        
        var model={//model模块，里面主要包含了数据
            money:0,
            items:[
                {name:&#39;钢笔&#39;,price:50,number:1},
                {name:&#39;练习本&#39;,price:1,number:0},
                {name:&#39;保温杯&#39;,price:25,number:0},
                {name:&#39;书包&#39;,price:80,number:0}
            ]
        };
        //$scope是angular的一个全局对象，你可以往上面加上属性和方法
        myApp.controller(&#39;myControl&#39;,function($scope) {//控制器模块
            $scope.model=model;//注意一下，前面的model在HTML中是看不到的，$scope.model这个model是可以的 $scope是全局对象，注意
 
            $scope.Add=function (newItem) {//添加内容
                 
                $scope.model.items.push({name:newItem.name,price:newItem.price});
            }
            $scope.sum=function() {//计算费用
                var Sum=0;
                angular.forEach($scope.model.items , function (item)  {
                    Sum+=item.price*item.number;
                } );
                return Sum;   
            }
            $scope.add=function(target) {
                 
                target.number++;
            }
        })
 
    </script>
 
</head>
<!-- view模块 -->
<body ng-controller=&#39;myControl&#39;>   
    <div class=&#39;container&#39;>
        <div class=&#39;row&#39;>
            <div class=&#39;col-md-5&#39;>
                <h2 style=&#39;color:red&#39; >总价为: {{sum()}}元</h2> 
            </div>
        </div>
        <br>
        <div class=&#39;row&#39;>
            <div class=&#39;col-md-10&#39;>
                商品:<input type=&#39;text&#39; ng-model=&#39;newItem.name&#39;><!-- 值被赋给了newItem.name-->
                单价:<input type=&#39;text&#39; ng-model=&#39;newItem.price&#39;>
                <button class=&#39;btn btn-success btn-md&#39; ng-click=&#39;Add(newItem)&#39; >添加</button>
            </div>
        </div>
        <br>
        <div class=&#39;row&#39;>
            <div class=&#39;col-md-10&#39;>
                <table class=&#39;table table-striped&#39;>
                    <thead>
                        <tr>
                            <th>商品</th>
                            <th>单价</th>
                            <th>购买数</th>
                            <th>Buy Or Not</th>
                        </tr>
                    </thead>
                    <tbody >
                        <tr ng-repeat=&#39;item in model.items&#39;  >
                            <td >{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.number}}</td>
                            <td><button class=&#39;btn btn-success&#39; ng-click=&#39;add(item)&#39;>BUY</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 
</body>
</html>

L'effet de l'opération est le suivant :

Application AngularJs : Un petit exemple dimplémentation dune page dachat similaire (avec code)

Recommandations associées :

Mise en cache détaillée d'angularjs

AngularJS implémente la fonction de sélection de tout et de sélection inverse_AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：problèmes de compatibilité js : résumé des méthodes de compatibilité des événements js (avec exemples)Article suivant：problèmes de compatibilité js : résumé des méthodes de compatibilité des événements js (avec exemples)

Articles Liés

Voir plus