CODEWITHSUNDEEP
javascripthtmlangularjs
Travis Michael Heller
Travis Michael Heller

Reputation: 1248

button should show when value is set to true but it is not

When i set the value to true under the object canPurchase the add to cart button should show. for some reason i can only get it to show when i set ng-show with an exclamation in front of it. i am still new to angular so i dont know the terminology very well.

here is my jsfiddle link: http://jsfiddle.net/jL0c6sLc/

    <body class="container"  ng-app="gemStore">
       <div class="product row">
         <h1>Store Name</h1>
       </div>
       <div ng-controller="StoreController as store">
        <div class="product row" ng-repeat="product in store.products">
          <h3>{{product.name}}<em class="pull-right">{{product.price | currency}}</em></h3>
          <button ng-show="store.product.canPurchase">Add to Cart</button>
        </div>
       </div>
    <script data-require="[email protected]" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script src="js/app.js"></script>

here is my app.js script

(function() {
 var app = angular.module('gemStore', []);
 var gems = [
   { name: 'Azurite', price: 2.95, canPurchase: true},
   { name: 'Bloodstone', price: 5.95, canPurchase: true},
   { name: 'Zircon', price: 3.95, canPurchase: true},
 ];
 app.controller('StoreController', function(){
  this.products = gems; 
 });
})();

Basically i only want the 'add to cart' button to show when the object 'canPurchase' is set to true. right now the only way i can get the button to show is by doing this:

     <button ng-show="!store.product.canPurchase">Add to Cart</button>

it is as if the value under canPurchase doesn't do anything wither it is set to true or false. please help me with understanding this and why it is not working properly.

Upvotes: 1

Views: 212

Answers (1)

Caspar Harmer
Caspar Harmer

Reputation: 8117

You need to use

 <button ng-show="product.canPurchase">Add to Cart</button>

Not store.product.canPurchase as you currently have inside the ng-repeat. I'm pretty sure it's just that. If you don't reference the individual product item, the expression is not valid.

Verified that changing this works in this jsfiddle here

Upvotes: 2

Related Questions