suchen

Heim  >  Artikel  >  Web-Frontend  >  AngularJs-Anwendung: Ein kleines Beispiel für die Implementierung einer ähnlichen Einkaufsseite (mit Code)

AngularJs-Anwendung: Ein kleines Beispiel für die Implementierung einer ähnlichen Einkaufsseite (mit Code)

不言
不言Original
2018-08-11 14:44:501525Durchsuche

Der Inhalt dieses Artikels handelt von der AngularJs-Anwendung: ein kleines Beispiel für die Implementierung einer ähnlichen Einkaufsseite (mit Code). Freunde in Not können darauf verweisen. .

Schreiben Sie eine kleine Bewerbung und beherrschen Sie 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>

Der Betriebseffekt ist wie folgt:

AngularJs-Anwendung: Ein kleines Beispiel für die Implementierung einer ähnlichen Einkaufsseite (mit Code)

Verwandte Empfehlungen:

Detailliertes Caching von AngularJS

AngularJS implementiert die Funktion zum Auswählen aller und Invertieren von Selection_AngularJS

Das obige ist der detaillierte Inhalt vonAngularJs-Anwendung: Ein kleines Beispiel für die Implementierung einer ähnlichen Einkaufsseite (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Kompatibilitätsprobleme: Zusammenfassung der js-Ereigniskompatibilitätsmethoden (mit Beispielen)Nächster Artikel：js-Kompatibilitätsprobleme: Zusammenfassung der js-Ereigniskompatibilitätsmethoden (mit Beispielen)

In Verbindung stehende Artikel

Mehr sehen