0

I just started out learning AngularJS and am trying to create a simple "store" web app. Here's my index.html:

<!DOCTYPE html>
<html>
   <head>
      <title>test</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <link type="text/css" rel="stylesheet" href="stylesheet.css" />
   </head>
   <body ng-app="myApp" ng-controller="store">
      <div>
         Remaining money:
         {{money|currency}}
      </div>
      <div>
         <table>
            <tr>
               <td><em>Item</em></td>
               <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
               <td><em>Price</em></td>
            </tr>
            <tr ng-repeat="item in store">
               <td><b>{{item.Name}}</b></td>
               <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
               <td>{{item.Price|currency}}</td>
               <td><button ng-click="buy(item)">Buy</button></td>
            </tr>
         </table>
      </div>
      <div>
         <table ng-hide="stock.length===0">
            <tr>
               <td><em>Item</em></td>
               <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
               <td><em>Quantity</em></td>
            </tr>
            <tr ng-repeat="item in stock">
               <td><b>{{item.Name}}</b></td>
               <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
               <td>{{item.Quantity}}</td>
            </tr>
         </table>
      </div>
      <script src="app.js"></script>
   </body>
</html>

And here's my app.js:

var app = angular.module('myApp', []);
app.controller('store', function ($scope, $interval) {
    $scope.money = 500;
    $scope.store = [{
        Name: "Cookie",
        Price: 10
    }, {
        Name: "Banana Bread",
        Price: 50
    }];
    $scope.stock = [];
    $scope.buy = function (item) {
        if (stock.indexOf(item) === -1) {
            $scope.stock.push(item);
        }
        $scope.stock.item.Quantity += 1;
        $scope.money -= $scope.store.item.Price;
    };
});

The problem lies in the buy function. It never pushes the item onto the stock array. As I'm very new, I'm probably missing something very simple but I can't figure it out.

2 Answers 2

1

Convert your

stock.indexOf(item)

to

$scope.stock.indexOf(item)
Sign up to request clarification or add additional context in comments.

5 Comments

This did it! Thank you. But now that it's showing up, I'm finding that my object property 'Quantity' is not being added. Any help there?
$scope.stock.item.Quantity += 1; there no item property in stock.
$scope.stock.item.Quantity += 1; means stock= { item: { Quantity : 0} }
Try putting item.Quantity = 0 in the if block, and then changing $scope.stock.item to item.
You can also store the index with var index = $scope.stock.indexOf(item) and then use $scope.stock[index] to refer to the item.
0

I use AngularJs all the time with open source project jinqJs

This is how you can find objects in an array

var data1 = [
              {Name: 'Tom', Age: 29, Location: 'Port Jeff', Sex: 'Male'},
              {Name: 'Jen', Age: 30, Location: 'Port Jeff', Sex: 'Female'},
              {Name: 'Tom', Age: 14, Location: 'Port Jeff', Sex: 'Male'},
              {Name: 'Diana', Age: 11, Location: 'Port Jeff', Sex: 'Female'}
            ];

    
var result = jinqJs().from(data1).where('Name == Tom').select();
document.body.innerHTML += '<pre>' + JSON.stringify(result, null, 4) + '</pre><br><br>';
<script src="https://rawgit.com/fordth/jinqJs/master/jinqjs.js"></script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.