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：
- 按钮获取类别：“ outOfStock”
- 按钮副本将从“购买”更改为“无库存”
- 库存副本将获得类别：“ 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>

比较特定的对象值，并进行以下操作

1 个答案: