Javascript ng重复无线电滤波器不工作

我使用angularJS来过滤我的数据，过滤选项是从JSON API获取的单选按钮，但是它使用通常的路由不起作用。我的

HTML

<div class="category">
  <div ng-repeat="category in categories">
    <input type="radio" name="typefilter" id="{{category.title}}" ng-model="typefilter" value='{{category.title}}'>
    <label for="{{category.title}}">{{category.title}}</label>
  </div>
</div>
<div class="food" ng-repeat="food in foods | filter:typefilter">
  <h4>{{food.name}}</h4>
  <p ng-repeat="food in food.type">{{food}}</p>
</div>

---

my

当

ng repeat

呈现模板时，它会创建一个子作用域，该子作用域通常从父案例继承。原型继承作用于变量的

引用

类型，而不是基元类型变量。在您的例子中，您使用的是

原语

类型变量，因此在您的例子中没有遵循它

在这种情况下，

typefilter

在

ng repeat

中存在作用域，因此

typefilter

仅在

ng repeat

作用域中可用。您无法在

ng repeat

div之外获取其值。因此，在这种情况下，您需要在

ng repeat

的基元类型变量之前使用

$parent.

明确指出父范围

ng-model="$parent.typefilter"

但这不是一个好方法，因为它与父控制器作用域紧密耦合（如果您使用的是Ionic，则不起作用，因为它会在每个

ion内容上创建子作用域）

相反，您应该遵循以下方法之一

定义模型时的点规则（已包含在@charlietfl answer中）
controllerAs
approach
在中，您可以找到解决此问题的另一种方法。
整个问题归结为您违反了在
ng模型中始终使用对象的所有重要规则

ng repeat
创建一个子作用域，而typefilter是仅在每个子作用域中设置的原语。父作用域无法看到该原语

在控制器中设置对象：

 $scope.filter={}

在视图中使用
filter.typefilter

<div class="category">
      <div ng-repeat="category in categories">
        <input type="radio" name="typefilter" id="{{category.title}}" ng-model="filter.typefilter" value='{{category.title}}'>
        <label for="{{category.title}}">{{category.title}}</label>
      </div>
    </div>
    <div class="food" ng-repeat="food in foods | filter:filter.typefilter">
      <h4>{{food.name}}</h4>
      <p ng-repeat="food in food.type">{{food}}</p>
    </div>


{{category.title}}
{{food.name}
{{food}

谢谢，您的解决方案对plunker有效，但对我的离子应用程序无效。我可以将其用于基于浏览器的应用程序。感谢you@RohitKumarVinay对对于
ionic
它不起作用，因为对于每个
ioncontent
它都会创建一个子范围。所以我建议你按照charlietfl的方式去做。。这就是为什么我在回答中说。。追求它不是正确的方法。。这类解释，请参考我的参考答案。在这一点上，我涵盖了全部要点
<div class="category">
      <div ng-repeat="category in categories">
        <input type="radio" name="typefilter" id="{{category.title}}" ng-model="filter.typefilter" value='{{category.title}}'>
        <label for="{{category.title}}">{{category.title}}</label>
      </div>
    </div>
    <div class="food" ng-repeat="food in foods | filter:filter.typefilter">
      <h4>{{food.name}}</h4>
      <p ng-repeat="food in food.type">{{food}}</p>
    </div>