Question

在此代码中，用户可以通过从选择列表中选择子类别和品牌来过滤产品。

<table class='table table-bordered'>
    <tr>
        <td>
            <select ng-init="SelectedSubCategory = SubCategories[0]" ng-model="SelectedSubCategory" ng-options="x as x.name for x in SubCategories | orderBy:'name'" class='form-control'>
                <option value="" ng-selected="selected">Select Sub Category</option>
            </select>
        </td>
    </tr>

    <tr>    
        <td>

            <select ng-init="SelectedBarnd = Brands[0]" ng-model="SelectedBrand" ng-options="x as x.name for x in Brands | orderBy:'name'" class='form-control'>
                <option value="" ng-selected="selected">Select Brand</option>
            </select>
        </td>
    </tr>
</table>


<table class='table table-bordered'>
    <tr>
        <th>ID</th>
        <th>Product Name</th>
        <th>SUB Category</th>
        <th>Image Path</th>

    </tr>
    <tr ng-repeat="product in Products | filter: {'SubCategoryID':SelectedSubCategory.id}:true | filter: {'BrandID':SelectedBrand.id}:true ">
        <td>{{ product.ProductID }}</td>
        <td>{{ product.BrandName }} {{ product.ProductName }}</td>
        <td>{{ product.SubCategoryName }}</td>
        <td> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </td>
    </tr>
</table>

但是当页面最初加载时，＆＃34;选择子类别＆＃34;和＆＃34;选择品牌＆＃34;正在select-List中显示给用户。但没有产品展示。所有产品都经过筛选。

基本上我最初想要的是没有过滤任何产品，但是当用户选择子类别和/或品牌时，只应该应用过滤器。

我需要为此做些什么代码更改？

Answer 1

删除ng-init="SelectedBarnd = Brands[0]"和ng-init="SelectedSubCategory = SubCategories[0]"，以便在网页加载时不首先过滤产品。

＆＃13;

var app = angular.module('app', []);

app.controller('myController', function($scope) {

  $scope.Brands = [
    {name: 'Bob', id: 0},
    {name: 'Chris', id: 1},
    {name: 'Dennis', id: 2}
  ];
  $scope.SubCategories = [
    {name: 'A', id: 0},
    {name: 'B', id: 1},
    {name: 'C', id: 2}
  ];
  
  $scope.Products = [
    {ProductID: 0, BrandID: 0, BrandName: 'Bob', SubCategoryID: 0, SubCategoryName: 'A'},
    {ProductID: 1, BrandID: 0, BrandName: 'Bob', SubCategoryID: 1, SubCategoryName: 'B'},
    {ProductID: 2, BrandID: 0, BrandName: 'Bob', SubCategoryID: 2, SubCategoryName: 'C'},
    {ProductID: 3, BrandID: 1, BrandName: 'Chris', SubCategoryID: 0, SubCategoryName: 'A'},
    {ProductID: 4, BrandID: 1, BrandName: 'Chris', SubCategoryID: 1, SubCategoryName: 'B'},
    {ProductID: 5, BrandID: 1, BrandName: 'Chris', SubCategoryID: 2, SubCategoryName: 'C'},    
    {ProductID: 6, BrandID: 2, BrandName: 'Dennis', SubCategoryID: 0, SubCategoryName: 'A'},
    {ProductID: 7, BrandID: 2, BrandName: 'Dennis', SubCategoryID: 1, SubCategoryName: 'B'},
    {ProductID: 8, BrandID: 2, BrandName: 'Dennis', SubCategoryID: 2, SubCategoryName: 'C'},
    {}
  ];
    
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

  <table class='table table-bordered'>
    <tr>
      <td>
        <select ng-model="SelectedSubCategory" ng-options="x as x.name for x in SubCategories | orderBy:'name'" class='form-control'>
          <option value="" ng-selected="selected">Select Sub Category</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>

        <select ng-model="SelectedBrand" ng-options="x as x.name for x in Brands | orderBy:'name'" class='form-control'>
          <option value="" ng-selected="selected">Select Brand</option>
        </select>
      </td>
    </tr>
  </table>


  <table class='table table-bordered'>
    <tr>
      <th>ID</th>
      <th>Product Name</th>
      <th>SUB Category</th>
      <th>Image Path</th>

    </tr>
    <tr ng-repeat="product in Products | filter: {'SubCategoryID':SelectedSubCategory.id}:true | filter: {'BrandID':SelectedBrand.id}:true ">
      <td>{{ product.ProductID }}</td>
      <td>{{ product.BrandName }} {{ product.ProductName }}</td>
      <td>{{ product.SubCategoryName }}</td>
      <td>
        <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75>
      </td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

您可以添加ng-show或ng-hide指令，并在其中放置您喜欢的任何条件。

Answer 3

指令ng-show和ng-hide将帮助您使任何视图元素可见或不可见。它们以动态方式更改显示属性，并应用一些CSS类来执行某些动画或任何其他逻辑。

根据给出的陈述，价值或逻辑陈述显示或隐藏的那些。所有这些都应来自$scope。

对于值，除布尔值外，任何数字＆gt; 0或任何与null或undefined不同的内容将被评估为true。

例如，在下表中，如果未设置category和subcategory，则表格不会呈现。如果在页面加载时，这将非常有用，那些实际上是未设置的。

<table class='table table-bordered' ng-show="category && subcategory">
    <tr>
        <th>ID</th>
        <th>Product Name</th>
        <th>SUB Category</th>
        <th>Image Path</th>

    </tr>
    <tr ng-repeat="product in Products | filter: {'SubCategoryID':SelectedSubCategory.id}:true | filter: {'BrandID':SelectedBrand.id}:true ">
        <td>{{ product.ProductID }}</td>
        <td>{{ product.BrandName }} {{ product.ProductName }}</td>
        <td>{{ product.SubCategoryName }}</td>
        <td> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </td>
    </tr>
</table>

非常重要：不要将ng-show和ng-hide合并。

还有ng-if，它不仅使其不可见，而且在任何视图元素中都会掉落。

第一次加载页面时如何避免过滤。 AngularJS

3 个答案: