Angularjs 如何避免在首次加载页面时进行过滤。安格拉斯

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

<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>

选择子类别
精选品牌
身份证件
品名
子类别
图像路径
{{product.ProductID}
{{product.BrandName}{{product.ProductName}}
{{product.subcategory name}

但当页面最初加载时，“选择子类别”和“选择品牌”将在选择列表中显示给用户。但没有任何产品展出。所有产品都经过过滤

基本上，我希望最初不过滤任何产品，但当用户选择子类别和/或品牌时，只应用过滤器

---

我需要对相同的代码进行哪些更改？

您可以添加

ng show

或

ng hide

指令，并在其中添加您喜欢的任何条件

指令

ng show

和

ng hide

将帮助您使任何视图元素可见或不可见。它们以友好的方式更改显示属性，并应用一些CSS类来执行一些动画或任何其他逻辑

根据给定的语句、值或逻辑语句显示或隐藏。所有这些都应取自

$scope

对于值，除布尔值外，任何大于0的数字或任何不同于null或未定义的数字都将被计算为

true

例如，在下表中，如果未同时设置

类别

和

子类别

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

<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>

身份证件
品名
子类别
图像路径
{{product.ProductID}
{{product.BrandName}{{product.ProductName}}
{{product.subcategory name}

非常重要：不要同时使用

ng show

和

ng hide

另外还有一个

ng if

，它不仅使其不可见，而且会在任何视图元素中消失。

删除

ng init=“SelectedBarnd=Brands[0]”和
ng init=“SelectedSubCategory=SubCategories[0]”
，以便在加载页面时不首先过滤产品


var-app=angular.module（'app'，[]）；
app.controller（'myController'，函数（$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'，子类别Id:0，子类别Name:'A'}，
{ProductID:1，BrandID:0，BrandName:'Bob'，子类别Id:1，子类别Name:'B'}，
{ProductID:2，BrandID:0，BrandName:'Bob'，子类别Id:2，子类别Name:'C'}，
{ProductID:3，BrandID:1，BrandName:'Chris'，子类别Id:0，子类别Name:'A'}，
{ProductID:4，BrandID:1，BrandName:'Chris'，子类别Id:1，子类别Name:'B'}，
{ProductID:5，BrandID:1，BrandName:'Chris'，子类别Id:2，子类别Name:'C'}，
{ProductID:6，BrandID:2，BrandName:'Dennis'，子类别Id:0，子类别Name:'A'}，
{ProductID:7，BrandID:2，BrandName:'Dennis'，子类别Id:1，子类别Name:'B'}，
{ProductID:8，BrandID:2，BrandName:'Dennis'，子类别Id:2，子类别Name:'C'}，
{}
];
});

选择子类别
精选品牌
身份证件
品名
子类别
图像路径
{{product.ProductID}
{{product.BrandName}{{product.ProductName}}
{{product.subcategory name}