1

このコードをAngularJSに書いて、項目名、価格、数量を追加したいと思います。この項目は下の表に表示され、配列として保存されます。後で、私は総手形を見つける。動的に追加されない項目のリスト

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <body> 

     <p>Try to add the items.</p> 

     <div ng-app="myApp" ng-controller="myCtrl"> 

      <table border="1"> 
       <tr> 
        <td>Item</td> 
        <td>Price</td> 
        <td>Quantity 
       </tr> 
       <tr> 
        <form> 
        <td><input type = "text" ng-model="name"></td> 
        <td><input type = "text" ng-model="price"></td> 
        <td><input type = "text" ng-model="quantity"></td> 
        </form> 
       </tr> 
      </table> 
      <br> 
      <button onClick="createItem()">Add to Cart</button> 

      <h2>My Cart</h2> 
      <div style="border: 1px solid blue;"> 
     </div> 
     <table border="1" class="mytable"> 
      <tr> 
       <td>S.No.</td> 
       <td>Item</td> 
       <td>Price</td> 
       <td>Quantity</td> 
       <td>Cost</td> 
      </tr> 
      <tr ng-repeat="item in items"> 
       <td><span ng-bind="item.serial"></span></td> 
       <td><span ng-bind="item.name"></span></td> 
       <td><span ng-bind="item.price"></span></td> 
       <td><span ng-bind="item.quantity"></span></td> 
       <td><span ng-bind="item.cost"></span></td> 
      </tr> 
     </table> 

     <br> 
     <h3><span ng-bind="total"></span></h3> 
    </div> 

    <script> 
    var app = angular.module('myApp', []); 
    app.controller("OnlineShopping", function($scope) 
    { 
     var i = 1; 
     $scope.createItem = function($scope) { 
      var item = {}; 
      item.serial = i++; 
      item.name = $scope.name; 
      item.price = $scope.price; 
      item.quantity = $scope.quantity; 
      item.cost = $scope.price * $scope.quantity; 
      item.cost = $scope.quantity; 
      addItem(item); 
     }; 
     $scope.addItem = function(item) { 
      $scope.items.push(item); 
      $scope.item = {}; 
     }; 
     $scope.totalBill = function(items) { 
      $scope.total = 0; 
      for(var item in items) { 
       total+=item.cost; 
      } 
      $scope.total = total; 
     };  
    </script> 

    </body> 
</html> 

私はそれが働いていないことを間違っている、とどのようにDBに保存するオブジェクトとして、この配列を集めることになっているものを私を導いてください。動的に表示するために新しいディレクティブテンプレートが追加されるたびに、オブジェクトを配列に追加する方法、どのように角を持ってこれを実現できるかはわかりません。

ありがとうございます。

答えて

1

コードには複数の問題があります。

1.シンタックスエラー:クローズドコントローラではありません。

2.YourコントローラはmyCtrlですが、

3. $ scope.items $scope.items = []

4.youが$scope.addItem

としてのaddItemを呼び出す必要がコントローラでこれをdefined.useされていないangularjsコードで OnlineShoppingを使用しました

5. Onclick角度では動作しません、あなたは使うべきng-click

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

 
<p>Try to add the items.</p> 
 

 
<div ng-app="myApp" ng-controller="OnlineShopping"> 
 

 

 
    <table border="1"> 
 
     <tr> 
 
      <td>Item</td> 
 
      <td>Price</td> 
 
      <td>Quantity 
 
     </tr> 
 

 
     <tr> 
 
      <td><input type="text" ng-model="name"></td> 
 
      <td><input type="text" ng-model="price"></td> 
 
      <td><input type="text" ng-model="quantity"></td> 
 

 
     </tr> 
 
    </table> 
 
    <br> 
 
    <button ng-click="createItem()">Add to Cart</button> 
 

 
    <h2>My Cart</h2> 
 
    <div style="border: 1px solid blue;"> 
 
    </div> 
 
    <table border="1" class="mytable"> 
 
     <tr> 
 
      <td>S.No.</td> 
 
      <td>Item</td> 
 
      <td>Price</td> 
 
      <td>Quantity</td> 
 
      <td>Cost</td> 
 
     </tr> 
 
     <tr ng-repeat="item in items"> 
 
      <td><span ng-bind="item.serial"></span></td> 
 
      <td><span ng-bind="item.name"></span></td> 
 
      <td><span ng-bind="item.price"></span></td> 
 
      <td><span ng-bind="item.quantity"></span></td> 
 
      <td><span ng-bind="item.cost"></span></td> 
 
     </tr> 
 
    </table> 
 

 
    <br> 
 
    <br> 
 
    <h3>Total : <span ng-bind="total"></span></h3> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller("OnlineShopping", function ($scope) { 
 
var i = 1; $scope.items = [];$scope.total = 0; 
 
$scope.createItem = function() { 
 
    var item = {}; 
 
    item.serial = i++; 
 
    item.name = $scope.name; 
 
    item.price = $scope.price; 
 
    item.quantity = $scope.quantity; 
 
    item.cost = ($scope.price * $scope.quantity).toFixed(2);; 
 
    $scope.addItem(item); 
 
}; 
 
$scope.addItem = function (item) { 
 

 
    $scope.items.push(item); 
 
    $scope.item = {}; 
 
    $scope.resetForm(); 
 
    $scope.totalBill($scope.items); 
 

 
}; 
 
$scope.totalBill = function (items) { 
 
    var total = 0; 
 
    for(var i = 0; i < $scope.items.length; i++){ 
 
     var item = $scope.items[i]; 
 
     total += (item.quantity*item.price); 
 
    } 
 
    $scope.total = total; 
 
}; 
 

 
$scope.resetForm = function(){ 
 
     $scope.name = ''; 
 
     $scope.price = ''; 
 
     $scope.quantity = ''; 
 
    } 
 
}); 
 
</script>
あなたのコード内

+0

あなたのコードは、総除き完全に正常に動作します間違いがたくさんある、このコードを試してみてください私が参考になるように、あなたの助けを借りて、私の間違いを指摘してくれてありがとう。 :) – Nik

+0

このコードのコードスニペットボタンを追加するには? – Nik

+1

承認済み:)。ありがとう:) – Nik

0

非常に多くの構文エラー:私はあなたのコード [ここをチェック] [1]

あなたがクローズ逃したbreaketのコードペンを用意しましたが、あなたは、いくつかのスクープを逃しました。これはあなたに役立つコードペンコードを確認してください

[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV? 

ので、あなたのコード、彼

<p>Try to add the items.</p> 

<div ng-app="myApp" ng-controller="OnlineShopping"> 


<table border="1"> 
<tr> 
<td>Item</td> 
<td>Price</td> 
<td>Quantity 
</tr> 

<tr> 
<form> 
<td><input type = "text" ng-model="name"></td> 
<td><input type = "number" ng-model="price"></td> 
<td><input type = "number" ng-model="quantity"></td> 
</form> 
</tr> 
</table> 
<br> 
<button ng-click="createItem()">Add to Cart</button> 

<h2>My Cart</h2> 
     <div style="border: 1px solid blue;"> 
     </div> 
     <table border="1" class="mytable"> 
     <tr> 
      <td>S.No.</td> 
      <td>Item</td> 
      <td>Price</td> 
      <td>Quantity</td> 
      <td>Cost</td> 
     </tr> 
     <tr ng-repeat="item in items"> 
      <td><span ng-bind="item.serial"></span></td> 
      <td><span ng-bind="item.name"></span></td> 
      <td><span ng-bind="item.price"></span></td> 
      <td><span ng-bind="item.quantity"></span></td> 
      <td><span ng-bind="item.cost"></span></td> 
     </tr> 
     </table> 

<br> 
<h3><span ng-bind="total"></span></h3> 
</div> 

<script> 
var app = angular.module('myApp', []); 

app.controller("OnlineShopping", function($scope) 
{ 
    var i = 1; 
    $scope.items = []; 
    $scope.createItem = function() { 
     var item = {}; 
     item.serial = i++; 
     item.name = $scope.name; 
     item.price = $scope.price; 
     item.quantity = $scope.quantity; 
     item.cost = $scope.price * $scope.quantity; 

     $scope.addItem(item); 
    }; 
    $scope.addItem = function(item) { 
     $scope.items.push(item); 
     $scope.item = {}; 
     $scope.resetForm(); 
    }; 
    $scope.totalBill = function(items)   { 
     $scope.total = 0; 
     for(var item in items) { 
      total+=item.cost; 
     } 
     $scope.total = total; 
    }; 

    $scope.resetForm = function(){ 
     $scope.name = ''; 
     $scope.price = ''; 
     $scope.quantity = ''; 
    } 
}) 
</script> 
+0

あなたのコードでは、カートに追加ボタンが動作していません。しかし、私はリセット部分が好きで、私はその機能を利用しました。 ご協力いただきありがとうございます。 – Nik

+0

Nikはうまく動作しています。大丈夫です。助けが必要な場合はお知らせください:) –

0

<!DOCTYPE html> 
<html> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script> 
<body> 

<p>Try to add the items.</p> 

<div ng-app="myApp" ng-controller="OnlineShopping"> 


    <table border="1"> 
     <tr> 
      <td>Item</td> 
      <td>Price</td> 
      <td>Quantity 
     </tr> 

     <tr> 

      <td><input type="text" ng-model="name"></td> 
      <td><input type="text" ng-model="price"></td> 
      <td><input type="text" ng-model="quantity"></td> 

     </tr> 
    </table> 
    <br> 
    <button ng-click="createItem()">Add to Cart</button> 

    <h2>My Cart</h2> 
    <div style="border: 1px solid blue;"> 
    </div> 
    <table border="1" class="mytable"> 
     <tr> 
      <td>S.No.</td> 
      <td>Item</td> 
      <td>Price</td> 
      <td>Quantity</td> 
      <td>Cost</td> 
     </tr> 
     <tr ng-repeat="item in items"> 
      <td><span ng-bind="item.serial"></span></td> 
      <td><span ng-bind="item.name"></span></td> 
      <td><span ng-bind="item.price"></span></td> 
      <td><span ng-bind="item.quantity"></span></td> 
      <td><span ng-bind="item.cost"></span></td> 
     </tr> 
    </table> 

    <br> 
    <h3><span ng-bind="total"></span></h3> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller("OnlineShopping", function ($scope) { 
var i = 1; $scope.items = []; 
$scope.createItem = function() { 
    var item = {}; 
    item.serial = i++; 
    item.name = $scope.name; 
    item.price = $scope.price; 
    item.quantity = $scope.quantity; 
    item.cost = $scope.price * $scope.quantity; 
    item.cost = $scope.quantity; 
    $scope.addItem(item); 
}; 
$scope.addItem = function (item) { 

    $scope.items.push(item) 

}; 
$scope.totalBill = function (items) { 
    $scope.total = 0; 
    for (var item in items) { 
     total += item.cost; 
    } 
    $scope.total = total; 
}; 
}); 
</script> 

</body> 
</html> 
+0

コードはうまく動作しますが、1行は余分なitem.cost = $ scope.quantity;です。ご協力いただきありがとうございます。 – Nik

+0

私の答えを受け入れてください – 4605786

関連する問題