比较一个特定的对象值，如果

Question

刚开始学习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>

我想实现的是：

创建一个函数或指令来比较每个库存数量
如果库存 = 0：
- 按钮得到 class: "outOfStock"
- 按钮副本将从"BUY"更改为"OUT OF STOCK"
- 库存副本将获得 class："zeroStock"

如果这听起来很愚蠢或者可能是重复的问题，我深表歉意，我确实尝试寻找它，但我可能使用了错误的术语。

感谢您的帮助。

Answer 1

你可以使用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>

比较一个特定的对象值，如果

Compare a specific object value and do something if

javascript

jquery

angularjs

controller

angularjs-scope