Сравните конкретное значение объекта и сделайте что-нибудь, если - PullRequest
Новая
       11

Сравните конкретное значение объекта и сделайте что-нибудь, если

0 голосов
/ 21 сентября 2018

Только начал изучать Angular, и я столкнулся с проблемой, описанной ниже:

Учитывая следующий сценарий: 

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>

Чего я хотел бы добиться:

  1. Создать функцию или директиву, которая будет сравниватькаждое количество на складе

  2. при наличии на складе = 0:

    • кнопка получает класс: "outOfStock"
    • копия кнопки изменится с "КУПИТЬ" на "OUT"OF STOCK "
    • фондовая копия получит класс:" zeroStock "

Приношу свои извинения, если это может показаться глупым или если может быть дубликат вопроса, япытался найти его, но я потенциально использовал неверную терминологию.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете использовать ng-class и ng-if для этого, даже нет необходимости в какой-либо функции:

Пример: 

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>
...