【问题标题】:AngularJS show data based on selected categoryAngularJS 根据所选类别显示数据
【发布时间】:2017-05-25 07:15:25
【问题描述】:

我想根据我从 selectBox 中选择的类别显示这个手风琴, 现在它只显示所有数据,但我想给出一些过滤器。 这是我的代码和我的数据库。 有谁知道如何在不更改任何数据库或使用 angularUI 手风琴的情况下做到这一点?

 <div class="cs_member_info">
      <select class="cs_member_select">
        <option value="A">Type 1</option>
        <option value="B">Type 2</option>
        <option value="C">Type 3</option>
      </select>
    </div>

<div class="cs_body" ng-repeat="cs in csList">  
  <div class="cs_acc_div">
    <button class="cs_accordion" ng-class="{'active': isClicked, 'off' : !isClicked}" ng-click="isClicked = !isClicked">
      <p class="noti_title">
        {{cs.faq.title}}
      </p>
    </button>
    <div class="panel" ng-show="isClicked">
      <p class="panel_inside">
        {{cs.faq.contents}}
      </p>
    </div>
  </div> 
</div>

    "_id":"59111a018479e30d387be584",
"lang":1,
"type":"FAQ",
"created_at":"2017-05-09T01:23:13.324Z",
"category":{
"code":1,
"name":"Member information"
},
"faq":{
"title":"Login with SNS ID",
"contents":"Login with SNS ID"
}

【问题讨论】:

  • 是 ng-repeat 填充的内容
  • 是的,我想用 ng-repeat 重复一遍
  • 制作小提琴很容易修改@beginnerprogrammer
  • 简单然后使用角度默认过滤器。在选择框中给出模型。我将发布一个示例。
  • 有两种可能的方法,第一种是使用 ng-switch 如果你想在 html 端使用一些指令。第二种方法是使用控制器或任何 js 函数为您执行此操作。

标签: angularjs drop-down-menu filter


【解决方案1】:

将此作为参考。默认角度滤镜

https://plnkr.co/edit/PpWo28ZO6QNiKEo1K5K7?p=preview

这是一张桌子。使用手风琴重复然后过滤它

查看此文档https://docs.angularjs.org/api/ng/filter/filter

  <label>Name only
    <select ng-model="search.name">
      <option value="John">John</option>
      <option value="Mary">Mary</option>
      <option value="Mary">Mary</option>
    </select>
  </label>
  <br>
  <table id="searchObjResults">
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
    <tr ng-repeat="friendObj in friends | filter:search:strict">
      <td>{{friendObj.name}}</td>
      <td>{{friendObj.phone}}</td>
    </tr>
  </table>

【讨论】:

  • 我有点困惑。这是我第一次使用 angularJS。如何通过从数据库中获取数据来重复选项?如您所见,我需要根据“类别名称”插入选项,您能描述一下吗?
  • 在开始之前,您需要经历一些事情。检查这个视频。这可能会让你开始了解 Angular youtube.com/watch?v=zKkUN-mJtPQ @beginnerprogrammer
猜你喜欢
  • 1970-01-01
  • 2015-07-11
  • 2020-10-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-29
相关资源
最近更新 更多