2017-09-25 14 views
-4

これは、角度jsとhtmlのための私のコードです。私はthis.whyについては、HTMLファイルや角度ファイルの構文に何かエラーがあれば、それはファイルで動作していないのを助けてください? 私は注文テーブルを作ろうとしていますが、私は角度jsメソッドを使用しています。ブラウザ上でAngularコードが動作していないときに、Addボタンも機能しません。順番に。Angular jsコードが機能しないのはなぜですか?

angular.module('Commande', []) 
 
    .controller('commandeController', ['$scope', function($scope) { 
 

 
     $scope.articles = [ 
 
       { id: 1, reference: 123, titre: "MSI GTX 980ti", prixUnitaire: 666.63, quantite: 0, montantHT: 666.63, montantTTC: 799.95 }, 
 
       { id: 2, reference: 456, titre: "Intel Core i7-4770K", prixUnitaire: 324.96, quantite: 0, montantHT: 324.96, montantTTC: 389.95 }, 
 
       { id: 3, reference: 789, titre: "ASUS MAXIMUS VII RANGER", prixUnitaire: 134.96, quantite: 0, montantHT: 134.96, montantTTC: 161.95 } 
 
     ]; 
 

 

 

 
     $scope.PrixTotalTTC = function() { 
 
      var resultTTC = 0; 
 

 
      angular.forEach($scope.articles, function (article) { 
 
       resultTTC += article.montantTTC * article.quantite; 
 
      }); 
 
      return resultTTC; 
 
     }; 
 

 
     $scope.PrixTotalHT = function() { 
 
      var resultHT = 0; 
 

 
      angular.forEach($scope.articles, function (article) { 
 
       resultHT += article.montantHT * article.quantite; 
 
      }); 
 
      return resultHT; 
 
     }; 
 

 
     $scope.NombreArticle = function() { 
 
      var resultArticle = 0; 
 

 
      angular.forEach($scope.articles, function(article){ 
 
       resultArticle += article.quantite; 
 
      }); 
 
      return resultArticle; 
 
     }; 
 

 
     $scope.AjouterArticle = function() { 
 
      $scope.articles.push({ 
 
       id: '', 
 
       reference: '', 
 
       titre: '', 
 
       prixUnitaire: 0, 
 
       quantite: 0, 
 
       montantHT: 0, 
 
       montantTTC: 0 
 
      }); 
 
     }; 
 

 
     $scope.SupprimerArticle = function(index) { 
 
      $scope.articles.splice(index, 1); 
 
     }; 
 

 
    }]);
<html lang="en-us"> 
 
<head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="style.css"> 
 
<script src="//code.angularjs.org/1.6.6/angular.min.js"> 
 
</script> 
 
<script src="app.js"></script> 
 

 
</head> 
 
<body ng-app="Commande" ng-controller="commandeController"> 
 
<h1>Bon de commande</h1> 
 
    <div class="content"> 
 
     <div class="col-md-12"> 
 
      <table class="table table-striped table-hover table-responsive"> 
 
       <thead> 
 
        <tr> 
 
         <th>#</th> 
 
         <th>Référence</th> 
 
         <th>Titre</th> 
 
         <th>Prix unitaire HT/€</th> 
 
         <th>Quantité</th> 
 
         <th>Montant HT/€</th> 
 
         <th>Montant TTC/€</th> 
 
         <th>Supprimer</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr ng-repeat="article in articles"> 
 
         <th> 
 
          <input type="number" ng-model="article.id" class="form-control bfh-number" placeholder="Id" min=0> 
 
         </th> 
 
         <td> 
 
          <input type="number" ng-model="article.reference" class="form-control bfh-number" placeholder="Référence" min=0> 
 
         </td> 
 
         <td> 
 
          <input type="text" ng-model="article.titre" class="form-control" placeholder="Titre"> 
 
         </td> 
 
         <td> 
 
          <input type="number" ng-model="article.prixUnitaire" class="form-control bfh-number"> 
 
         </td> 
 
         <td> 
 
          <input type="number" ng-model="article.quantite" class="form-control bfh-number" min=0> 
 
         </td> 
 
         <td> 
 
          <input type="number" ng-model="article.montantHT" class="form-control bfh-number" min=0> 
 
         </td> 
 
         <td> 
 
          <input type="number" ng-model="article.montantTTC" class="form-control bfh-number" min=0> 
 
         </td> 
 
         <td> 
 
          <a href ng:click="SupprimerArticle($index)"><i class="fa fa-times delete"></i></a> 
 
         </td> 
 
        </tr> 
 
        <tr class="success"> 
 
         <th class="success">TOTAL</th> 
 
         <td class="success"></td> 
 
         <td class="success"></td> 
 
         <td class="success"></td> 
 
         <td class="success">{{ NombreArticle() }} article(s)</td> 
 
         <td class="success" ng-style="PrixTotalHT() >= 1000 && {'font-weight': 'bold'}">{{ PrixTotalHT() | number:2 }} €</td> 
 
         <td class="success" ng-style="PrixTotalHT() >= 1000 && {'font-weight': 'bold'}">{{ PrixTotalTTC() | number:2 }} €</td> 
 
         <td class="success"></td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
      <a href ng:click="AjouterArticle()" class="btn btn-primary">Ajouter un article <i class="fa fa-plus"></i></a> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

それは私のコードです。あなたは、このようなMAMP、XAMPPまたは類似としてコンテンツ管理システムCMS)を、必要とするよう

+0

デバッグのヘルプを求める質問**(「なぜこのコードは動作しませんか?」)**は、問題の内容、特定の問題またはエラー、および質問自体に再現するのに必要な最短コードを含める必要があります。明確な問題文がない質問は他の読者には役に立たない:Stack overflowへようこそ。これを読んで下さい。 :https://stackoverflow.com/help/on-topic –

+0

ここで私はコードスニペットを実行しますが、私のエディタでは動作しません。 –

+0

取得したいものとそのコードがそのまま取得するものについて詳しく説明する必要があります。 – Assafs

答えて

0

が鳴ります。基本的には、JavaScriptコードを動作させるためにローカルサーバを実行する必要があります(使用するPHPも同様です)。 JavaScriptが必要な場合は、Node.jsを使用するだけです

+0

こんにちは@AlekseySolovey、Angularはフロントエンドのシングルページアプリケーションです。私はAjsのcdn統合を取得するためにいくつか間違って頭に入ったと思います。 –

+0

あなたはいつもangularjsをダウンロードしてスクリプトとして手動でインポートすることができますが、あなたのコードがここで動作すれば、私はあなたがローカルサーバ –

関連する問題