Question

我有一个问题模型，这是结构：

 {
    "id": 5,
    "description": "Does your site have Facebook?",
    "question_category_id": 3
  }

还有question_category结构：

{
    "id": 1,
    "name": "Network",
    "description": "Network"
  }

现在我可以使用AngularJs从服务器端获取整个问题列表。

但我只想在第1部分中显示属于第1类（id = 1）的问题，在第2部分中显示类别2（id = 2）中的问题

我喜欢这个视图：

网络

你有Facebook吗？

你有推特吗？



大学

你的最高学位是什么？

等



等...

我试着写一个过滤器：

       <ul class="questionsClass">
          <li ng-repeat="q in questions | filter:question_category_id = 1">
            {{q.description}}

          </li>
        </ul>

但它不起作用。

无法理解。

所以我想知道如何编写js part和html部分。

谢谢

更新

现在我的html看起来像这样：

<table class="table table-striped table-bordered table-hover" id="dataTables-example" ng-controller="testControl">

        <div ng-repeat="qc in questionsCategories">
            <thead>
                <tr>
                    <th colspan="3" class="bg-success">{{qc.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="q in questions | filter:{question_category_id : qc.id}">
                    <td class="text-center">{{q.id}}</td>
                    <td>
                        <span>{{q.description}}</span>
                        <a href="#" data-toggle="popover" title="" data-content="{{q.tip}}">
                            <i class="fa fa-info-circle fa-1x text-primary"></i>
                        </a>
                    </td>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" value="option1">Yes
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2">No
                        </label>
                    </td>
                </tr>
            </tbody>
        </div>

    </table>

但我得到的只是一个没有类别的问题列表。它看起来像这样：

你有Facebook吗？

你有推特吗？

你的最高学位是什么？

等

有人能解决这个问题吗？

谢谢。

更新2

filter: {question_category_id : qc.id}

此过滤器执行“开始于”不是“等于”操作，这导致不属于类别1的问题，例如，但在类别10中，显示在类别1部分中。

我也尝试过：

filter: q.question_category_id == qc.id : true

然后只显示类别，问题就消失了。

现在不知道接下来要做什么......

Answer 1

因此，如果我理解正确，则您拥有以下结构的数据。

// Categories
$scope.categories = [{
  "id": 1,
  "name": "Network",
  "description": "Network"
},{
  "id": 2,
  "name": "University",
  "description": "University"
}];

// Questions
$scope.questions = [{
  "id": 1,
  "description": "Does your site have Facebook?",
  "question_category_id": 1
},{
  "id": 2,
  "description": "Does your site have Twitter?",
  "question_category_id": 1
},{
  "id": 3,
  "description": "Did you go to University?",
  "question_category_id": 2
}]

然后你的HTML模板看起来像。

<table ng-repeat="c in categories">
  <thead>
    <tr>
      <th>{{ c.id }}. {{ c.description }}</th>
    </tr>
  </thead>
  <tbody ng-repeat="q in questions | filter: { question_category_id: c.id } : true">
    <tr>
      <td>{{q.description}}</td>
    </tr>
  </tbody>
</table>

imgur

示例Plunker http://plnkr.co/edit/pKXF8b

如何过滤AngularJS中的对象集合

1 个答案: