我正在使用 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>
关于javascript - ng-repeat radio 过滤器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35526902/