[AngularJS]ng-repeat 广播电台筛选器不工作

发布时间: 2017/4/16 21:21:13
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

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

控制器

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();
});

我的付出上百元

解决方法 1:

整个问题归结为你打破总是总是总是使用对象中的所有重要规则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

官方微信
官方QQ群
31647020