Angularjs 按选择值进行角度过滤器

我有一个应用程序，我想根据包含产品类型的“选择”中的值筛选一长串产品。过滤器工作，但只有在我选择了某个内容之后。它最初设置“全部显示”选项，但过滤掉所有内容。如果我选择了其他内容，它就会工作，如果我重新选择“全部显示”，它就会工作。但是为什么过滤器一开始不能工作呢

模型（看起来像这样）：

HTML：

<select id="productFilter" data-ng-model="productFilter">
    <option value="" selected="selected">Show all</option>
    <option data-ng-repeat="type in productTypes" value="{{type.Type}}">{{type.Name}}</option>          
</select>
<p data-ng-repeat="product in products | filter:{Type:productFilter} ">{{product.Name}}</p>

全部展示
{{type.Name}
{{product.Name}

这是一个基于上述代码的工作示例：

Slava.N的注释是正确的，您不应该在{}中包装productTypes和product

---

另外，JavaScript是区分大小写的语言，

product.Name

始终未定义，您应该在HTML中使用

product.Name

。

这是一个基于上述代码的工作示例：

Slava.N的注释是正确的，您不应该在{}中包装productTypes和product

---

另外，JavaScript是区分大小写的语言，

product.Name

始终未定义，您应该在HTML中使用

product.name

。

使用product.Type而不是在第二个ng重复筛选器中使用Type

使用product.Type而不是在第二个ng重复筛选器中使用Type

我建议在选项上使用ng选项而不是ng重复：

<select id="productFilter" ng-model="productFilter" 
  data-ng-options="type.type as type.name for type in productTypes">
    <option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
    {{product.name}}
</p>

这是一个jsbin（基于他的种类）

---

我建议使用ng选项，而不是在选项上重复使用ng：

<select id="productFilter" ng-model="productFilter" 
  data-ng-options="type.type as type.name for type in productTypes">
    <option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
    {{product.name}}
</p>

这是一个jsbin（基于他的种类）

---

您设置了$scope.productFilter=''。

---

因此，默认情况下，它的返回值在filter处为空。

设置$scope.productFilter=''。

---

因此，它在过滤器处的默认返回值为空。

这意味着$scope.products={[…]}？它应该是数组$scope.products=[{…}，…]；或对象$scope.products={}；此示例不起作用。这是什么意思$scope.products={[…]}？它应该是数组$scope.products=[{…}，…]；或对象$scope.products={}；这个例子不起作用。嗯。。。这似乎总是过滤掉一切它到底在做什么？嗯。。。这似乎总是过滤掉一切它到底在做什么？

  $scope.products = [
    {name: 'productA', type: 1},
    {name: 'productB', type: 1},
    {name: 'productC', type: 2},
    {name: 'productD', type: 2}
  ];

  $scope.productTypes = [
    {name: 'typeAlpha', type: 1},
    {name: 'typeBravo', type: 2}
  ];