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

Answer 2

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

在这种情况下，typefilter范围内的ng-repeat是typefilter，因此ng-repeat仅在ng-repeat范围内可用。你不能在$parent. div之外得到它的价值。因此，在这种情况下，您需要在ng-repeat的基本类型变量之前使用ng-model="$parent.typefilter"明确指出父作用域。

ion-content

Working Plunkr

但是这不是一个好的方法，因为它与父控制器范围紧密结合（如果你使用Ionic则无效，因为它确实在每个controllerAs创建子范围）

相反，你应该遵循以下任何一种方法。

定义模型时的点规则（已在@charlietfl回答中介绍）
awk -F\> -e ' BEGINFILE {sum=0; count=0} /<Overall>/ {count++;sum+=$2;} ENDFILE {printf("%s: %4.1f\n", gensub(".dat","","g",FILENAME), sum/count);} ' hotel*.dat接近

在this answer中，您可以找到解决此问题的另一种方法。

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

2 个答案: