在 angualrjs 中选中复选框时使用条件 ng-show

Question

这是我的代码，我试图通过使用ng-show排除缺货产品。如果复选框仅选中仅显示可用产品，则它应显示所有产品。

.HTML：

<input type="checkbox" id="chkStock" value="Exclude Out of Stock" ng-model="exclude" />Exclude Out of Stock
<div class="content">
   <input type="text" ng-model="search" /><br />
   <div ng-show="exclude">
      <ul>
         <li ng-repeat="product in products | orderBy:'-name' |filter:search" ng-show="product.available">
            {{product.name}} - {{product.price | currency:'₹':3}}
         </li>
      </ul>
   </div>
</div>

Javascript：

var myapp = angular.module("MyApp", []);
myapp.controller("ProductController", ['$scope', function($scope) {
    $scope.products = [{
            name: 'iPhone7+',
            manufacturer: 'Apple',
            price: 75000,
            available: true
        },
        {
            name: 'iPhone6',
            manufacturer: 'Apple',
            price: 45000,
            available: true
        },
        {
            name: 'Redmi Note 3',
            manufacturer: 'Xiaomi',
            price: 12000,
            available: false
        },
        {
            name: 'Samsung C9 Pro',
            manufacturer: 'Samsung',
            price: 40000,
            available: true
        },
        {
            name: 'Redmi Note 4',
            manufacturer: 'Xiaomi',
            price: 13000,
            available: false
        }
    ];
}]);

请帮助我。

Answer 1

您可以使用多个 ng-show

<input type="checkbox" id="chkStock" value="Exclude Out of Stock" ng-model="exclude" />Exclude Out of Stock
<div class="content">
    <input type="text" ng-model="search" /><br />
    <div>
        <ul>
          <div ng-show="!exclude">
            <li ng-repeat="product in products | orderBy:'-name' |filter:search">
                   {{product.name}} - {{product.price | currency:'₹':3}}
            </li>
          </div>
          <div ng-show="exclude">
              <li ng-repeat="product in products | orderBy:'-name' |filter:search" ng-show="product.available">
                   {{product.name}} - {{product.price | currency:'₹':3}}
            </li>
          </div>
        </ul>
    </div>
</div>

另一种方法是使用 ng-if 和 ng-else，但随后将根据条件生成div，使用 ng-show 将生成两者，但仅在条件下可见。

Answer 2

<li>标签中的类似内容

<li ng-repeat="product in products | 
               orderBy:'-name' | 
               filter: {products : {available: 'true'}}">