ng-repeat 无线电过滤器不工作

Question

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

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>

控制器

app.factory('Categories', ['$resource',
function ($resource) {
    return $resource('https://safe-depths-4702.herokuapp.com/api/categories/:categoryId', {
      categoryId: '@_id'
    }, {
      update: {
        method: 'PUT'
      }
    });
  }
]).factory('Foods', ['$resource',
  function ($resource) {
    return $resource('https://safe-depths-4702.herokuapp.com/api/foods/:foodId', {
      foodId: '@_id'
    }, {
      update: {
        method: 'PUT'
      }
    });
  }
]).controller('MainCtrl', function($scope,Categories,Foods) {
  $scope.categories = Categories.query();
  $scope.foods = Foods.query();
});

我的plunk

Answer 1

当 ng-repeat 呈现模板时，它会创建一个子范围，该范围从父案例原型继承。原型继承适用于 reference 类型的变量，而不适用于原始类型变量。在您的情况下，您使用的是 primitive 类型变量，因此在您的情况下没有遵循它。

在这种情况下，typefilter 是 ng-repeat 内的范围，因此 typefilter 仅在 ng-repeat 范围内可用。你无法在 ng-repeat div 之外获取它的值。因此，在这种情况下，您需要在 ng-repeat 的原始类型变量之前使用 $parent. 明确指出父作用域。

ng-model="$parent.typefilter"

Working Plunkr

但这不是一个好的方法，因为它与父控制器作用域紧密结合（如果您使用 Ionic，则不会起作用，因为它会在每个 ion-content 上创建子作用域）

您应该遵循以下任一方法。

定义模型时的点规则（已包含在@charlietfl 回答中）
controllerAs接近

在this answer中，您可以找到其他方法来解决这个问题。

Answer 2

整个问题归结为你违反了总是总是总是在ng-model

中使用对象的所有重要规则

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>

DEMO

ng-repeat 无线电过滤器不工作

ng-repeat radio filter not working

javascript

radio-button

angularjs

angularjs-filter