javascript - ng-repeat radio 过滤器不工作

标签 javascript angularjs radio-button angularjs-filter

我正在使用 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>

Controller

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

最佳答案

整个问题归结为你打破了总是总是总是ng-model中使用对象的所有重要规则

ng-repeat 创建一个子作用域,typefilter 是一个原语,只在每个子作用域中设置。父作用域看不到那个原语

在 Controller 中设置一个对象:

 $scope.filter={}

在 View 中使用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

关于javascript - ng-repeat radio 过滤器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35526902/

相关文章:

javascript - 谷歌地图在短距离内会输出不准确的坐标

javascript - Magento 管理html : "sendMail" is not a function

javascript - 添加支持异步重新加载的Web层

AngularJs:ui.router 未加载 Controller

javascript - 如何在 ipad 上使用 javascript 在网络浏览器中播放 wav 文件

angularjs - AngularJS 中的路由参数

javascript - querySelectorAll 查找哪个按钮被选中 JavaScript

android - 动态添加单选按钮单选

html - 检查最新检查的单选按钮?

javascript - 内联文本背景颜色,无需划分为单独的元素