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

【问题标题】：Compare a specific object value and do something if比较一个特定的对象值，如果
【发布时间】：2018-09-21 15:32:46
【问题描述】：

刚开始学习 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：
- 按钮获取类：“outOfStock”
- 按钮副本将从“购买”变为“缺货”
- stock 副本将获得类：“zeroStock”

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

感谢您的帮助。

【问题讨论】：

课堂使用ng-class="{'outOfStock': product.stock == 0}"，消息使用{{product.stock == 0 ? 'OUT OF STOCK : 'BUY''}}等
谢谢@AlekseySolovey，它似乎工作正常，我只是在努力解决第二部分：{{product.stock == 0 ? 'OUT OF STOCK : 'BUY''}}，但我会努力弄清楚。
是的，评论对于完整信息来说太短了，但它是ternary operator。它有一个语法：boolean ? if_true : if_false。所以如果product.stock为0，那么就会渲染'OUT OF STOCK'，基本上就是一个IF语句。您还可以通过方法调用（在控制器中）{{checkStock()}}
我想我精通它的旅程会很长但并非不可能:) 谢谢@AlekseySolovey!!!

标签： javascript jquery angularjs controller angularjs-scope

【解决方案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>

【讨论】：