Search code examples
javascriptjqueryangularjscontrollerangularjs-scope

Compare a specific object value and do something if

Just started to learn Angular and I am facing an issue as described below:

Given the following scenario:

var app = angular.module('test', []);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.title = 'This is another test';
    $scope.promo = 'More or less'
    $scope.products = [{
      name: 'Product 1',
      price: 19,
      stock: 20
    }, {
      name: 'Product 2',
      price: 19,
      stock: 12
    }, {
      name: 'Product 3',
      price: 19,
      stock: 3
    }, {
      name: 'Product 4',
      price: 19,
      stock: 0
    }, ]
  }
]);
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<style>
  .stock {
    color: green;
  }
  
  .zeroStock {
    color: red;
  }
  
  .buy {
    background-color: green;
    color: #fff;
    margin-bottom: 20px;
    border: 0;
    padding: 10px 20px;
  }
  
  .outOfStock {
    background-color: red;
  }
</style>


<body ng-app="test">
  <div class="main" ng-controller="MainController">
    <div class="test" ng-repeat="product in products">
      <div class="name"> {{product.name}} </div>
      <div class="price"> {{product.price}} </div>
      <div id="stock" class="stock"> {{product.stock}} </div>
      <button class="buy">BUY</button>
    </div>
  </div>
  <script src="js/app.js"></script>
  <script src="js/controllers/MainController.js"></script>
</body>

</html>

What I'd like to achieve is:

  1. Create a function or directive which will compare each stock quantity

  2. if stock = 0:

    • button get class: "outOfStock"
    • button copy will change from "BUY" to "OUT OF STOCK"
    • stock copy will get the class: "zeroStock"

My apologies if this might sounds silly or if might be a duplicate question, I did try to look for it, but I have potentially used the wrong terminology.

Thank you for your help.

Solution

  • You can use ng-class and ng-if for this, there is even no need for any function:

    Example:

    var app = angular.module('test', []);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.title = 'This is another test';
    $scope.promo = 'More or less'
    $scope.products = [{
      name: 'Product 1',
      price: 19,
      stock: 20
    }, {
      name: 'Product 2',
      price: 19,
      stock: 12
    }, {
      name: 'Product 3',
      price: 19,
      stock: 3
    }, {
      name: 'Product 4',
      price: 19,
      stock: 0
    }, ]
  }
]);
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>

<style>
  .stock {
    color: green;
  }
  
  .zeroStock {
    color: red;
  }
  
  .buy {
    background-color: green;
    color: #fff;
    margin-bottom: 20px;
    border: 0;
    padding: 10px 20px;
  }
  
  .outOfStock {
    background-color: red;
  }
</style>


<body ng-app="test">
  <div class="main" ng-controller="MainController">
    <div class="test" ng-repeat="product in products">
      <div class="name"> {{product.name}} </div>
      <div class="price"> {{product.price}} </div>
      <div id="stock" class="stock" ng-class="{'zeroStock': product.stock == 0}"> {{product.stock}} </div>
      <button class="buy" ng-if="product.stock != 0">BUY</button>
      <button ng-if="product.stock == 0" class="outOfStock">Out Of stock</button>
    </div>
  </div>
  <script src="js/app.js"></script>
  <script src="js/controllers/MainController.js"></script>
</body>

</html>