Javascript AngularJS过滤器bu选项/选择_Javascript_Html_Angularjs

Javascript AngularJS过滤器bu选项/选择

javascript html angularjs

Javascript AngularJS过滤器bu选项/选择,javascript,html,angularjs,Javascript,Html,Angularjs,资料来源：我对angularJS是新来的，我正试着去了解它我有一个任务，我需要过滤一个选择选项菜单，只显示类别中的项目。我在网上（下面）找到了这个，这是一个好的开始。然而，我不知道如何通过每个选项“catgry”进行过滤。最后，我想通过以下方式进行过滤和显示：'标题/名称'，'跑步'，'游泳'和其他。只有选定的类别可见。谢谢你的帮助 <!doctype html> <html> <head> <meta charset="utf-8"> <

资料来源：

我对angularJS是新来的，我正试着去了解它

我有一个任务，我需要过滤一个选择选项菜单，只显示类别中的项目。我在网上（下面）找到了这个，这是一个好的开始。然而，我不知道如何通过每个选项“catgry”进行过滤。最后，我想通过以下方式进行过滤和显示：'标题/名称'，'跑步'，'游泳'和其他。只有选定的类别可见。谢谢你的帮助

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Anjular Filtered List</title>
<script src="js/angular.min.js"></script>

<style>

img{
width:300px;
height:auto;
}
</style>
</head>

<body>
<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">
  <input type="text" id="query" ng-model="query">
  <select ng-model="orderList">
    <option value="title">By title</option>
    <option value="-catgry">Swim</option>
    <option value="catgry">Other</option>
  </select>

  <ul id="notebook_ul">
    <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
      <h3>{{notebook.title}}</h3>
      <img src="{{notebook.featimg}}" alt="">
      <p>{{notebook.ctent}}</p>
      <div class="right top">{{notebook.catgry}}</div>
    </li>
  </ul>
  <span>Number of Articles: {{notebooks.length}}</span>
</div>

<script>
var notebooks = angular.module('notebooks', []);

notebooks.controller('NotebookListCtrl', function($scope) {
  $scope.notebooks = [
    {"title": "Making sure you are ready like the Gold Coast for the Commonwealth Games",
     "featimg": "images/image2.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "swim"},
    {"title": "Looking after us on our beaches",
     "featimg": "images/image1.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "run"},
    {"title": "Running is Beautiful",
     "featimg": "images/image3.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "other"},
    {"title": "What swimming stroke is this?",
     "featimg": "images/image4.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "swim"},
    {"title": "Team Dynamics",
     "featimg": "images/image5.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "other"},
    {"title": "Why Quidditch?",
     "featimg": "images/image6.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "run"}
  ];
  $scope.orderList = "title";
});
</script>
</body>
</html>


无规则过滤列表
img{
宽度：300px；
高度：自动；
}
按标题
游
其他


{{notebook.title}
{{notebook.ctent}
{{notebook.catgry}


文章数：{{notebooks.length}
var笔记本=angular.module（'笔记本'，[]）；
Notebook.controller（'NotebookListCtrl'，函数（$scope）{
$scope.notebooks=[
{“标题”：“确保你像黄金海岸一样准备好参加英联邦运动会”，
“featimg”：“images/image2.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“凯格里”：“游泳”}，
{“标题”：“在海滩上照顾我们”，
“featimg”：“images/image1.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“catgry”：“run”}，
{“标题”：“跑步是美丽的”，
“featimg”：“images/image3.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“catgry”：“其他”}，
{“标题”：“这是什么泳姿？”，
“featimg”：“images/image4.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“凯格里”：“游泳”}，
{“标题”：“团队动力”，
“featimg”：“images/image5.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“catgry”：“其他”}，
{“标题”：“为什么魁地奇？”，
“featimg”：“images/image6.jpg”，
“ctent”：“文章介绍和链接将输入本节。”，
“catgry”：“run”}
];
$scope.orderList=“title”；
});

给你只要想一想你应该继续进行

ng show

，

ng hide

更多信息

工作

HTML

<div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl">

      <select ng-model="orderList">
        <option value="title">Title</option>
        <option value="swim">Swim</option>
        <option value="run">Run</option>
        <option value="other">Other</option>
      </select>
      {{orderList}}

      <ul id="notebook_ul">
        <li ng-repeat="notebook in notebooks"
        ng-show="notebook.catgry === orderList">
          <h3>{{notebook.title}} + {{notebook.catgry}}</h3>
          <img src="{{notebook.featimg}}" alt="">
          <p>{{notebook.ctent}}</p>
          <div class="right top">{{notebook.catgry}}</div>

        </li>
      </ul>
      <span>Number of Articles: {{notebooks.length}}</span>
    </div>

我没有得到你真正想要的东西，因为我不清楚。我想有一个选择选项菜单，以过滤一个基于其类别的文章列表。因此，如果我从“选择”下拉菜单中选择“游泳”，则只会显示类别为“游泳”的文章。同样有效我已经检查过了，请将您的代码放入plunkr中。我很抱歉，但我不理解您所说的“同样有效”是什么意思。我的当前代码按类别排序，但所有类别均显示：：-）你想选择控制选项为“游泳，跑步，其他”这是开始有意义了。非常感谢您分享您的技能。我正在研究“多选”选项。在阅读角度文档时，可以像在标准HTML中一样在select元素中使用“multiple”。然而，在我能找到的所有示例中，像这样的过滤都使用按钮元素和复选框组合。我正在尝试为选择获取多个选项，因此如果选择了“跑步”和“游泳”，则显示机器人。此时如果我不使用任何显示。我知道你的时间很宝贵，所以如果你没有时间，我将不胜感激。：-）@LaurenceL让我们去聊天室，这样我们就可以进一步讨论我没有提前回复的道歉。工作中的混乱。接下来的几个小时我都在开会，但如果你方便的话。我希望通过聊天了解更多信息。

var notebooks = angular.module('notebooks', []);

notebooks.controller('NotebookListCtrl', function($scope) {
  $scope.notebooks = [
    {"title": "Making sure you are ready like the Gold Coast for the Commonwealth Games",
     "featimg": "images/image2.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "swim"},
    {"title": "Looking after us on our beaches",
     "featimg": "images/image1.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "run"},
    {"title": "Running is Beautiful",
     "featimg": "images/image3.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "other"},
    {"title": "What swimming stroke is this?",
     "featimg": "images/image4.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "swim"},
    {"title": "Team Dynamics",
     "featimg": "images/image5.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "title"},
    {"title": "Why Quidditch?",
     "featimg": "images/image6.jpg",
     "ctent": "Article intro ang links will be entered into this section.",
     "catgry": "run"}
  ];
  $scope.orderList = "title";
});