Angularjs过滤器数组使用其他对象内的属性

Question

我有以下 Json 文件...

我只给你看 1 个对象... 我有 154 个具有相同结构的我想要过滤名称...当在 art_type.name = '--Something...--'

{
"1": {
    "name": "Miami City Ballet",
    "created": "2011-04-24 00:39:28",
    "modified": "2015-09-02 09:30:49",
    "author": [],
    "slug": "miami-city-ballet",
    "address": "2200 Liberty Ave.",
    "city": "Miami Beach",
    "state": "Fl.",
    "zipcode": "33139",
    "phone_number": "Box Office: 305 929 7010",
    "email_address": "eparkinson@miamicityballet.org",
    "web_address": "http://www.miamicityballet.org",
    "twitter_address": "https://twitter.com/MiamiCityBallet",
    "facebook_address": "https://www.facebook.com/miamicityballetschool",
    "instagram_address": "",
    "gallery_hours": "<div><span style=\"line-height: 1.4em;\">order </span><span style=\"line-height: 1.4em;\">by phone 1 877 929 710</span></div>\n<div>or in person</div>\n<div><b>Box Office Hours:</b></div>\n<div>Mon - Fri: 10 - 5</div>\n<div><b>Tickets start at $25</b></div>\n<div>Grand Opening:</div>\n<div><b>Friday, October 23, 8 pm</b></div>\n<div><b>Arsht Center</b></div>",
    "gallery_id": "46",
    "additional_details": "October 23 - November 15\n<h3>Program One:</h3>\n<div>Swan Lake – Balanchine/Tchaikovsky</div>\n<div>Viscera – Scarlett/Liebermann</div>\n<div>Fancy Free – Robbins/Bernstein</div>",
    "gallery_additional_info": "Swan Lake is the most famous of all ballets, its name practically synonymous with the art form. Miami City Ballet is excited to be bringing back to our audiences the glorious version of Acts Two and Four – the “white acts” – that George Balanchine created in 1951 for Maria Tallchief and New York City Ballet. More than a tragic romance, it is a timeless meditation on the universal experience of love and loss, set to Tchaikovsky’s most evocative score.",
    "critics_choice": "0",
    "circuit": {
        "6": {
            "name": "Art Is Everywhere",
            "created": "2011-04-24 00:33:19",
            "modified": "2011-04-24 00:33:19",
            "author": false,
            "slug": "art-is-everywhere",
            "id": 6
        }
    },
    "art_type": {
        "1": {
            "name": "Performing Arts",
            "created": "2011-04-24 00:29:55",
            "modified": "2011-04-24 00:29:55",
            "author": false,
            "slug": "performing-arts",
            "id": 1
        }
    },
    "monthly_update": {
        "ID": "273",
        "post_author": "1",
        "post_date": "2011-04-14 16:45:58",
        "post_date_gmt": "2011-04-14 21:45:58",
        "post_content": "April 1 - 3\r\nKravis Center for the Performing Arts\r\n\r\nApril 29 - May 1\r\nBroward Center for the Performing Arts\r\n<strong> Program IV - Romeo and Juliet</strong>\r\nThe Company Premiere of John Cranko’s version\r\n<em>The New York Times raves, “arguably the best dance treatment of Prokofiev’s celebrated score.â€</em>\r\n<table border=\"0\" cellspacing=\"2\" cellpadding=\"1\" width=\"350\" align=\"center\">\r\n<tbody>\r\n<tr>\r\n<td align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/Jennifer-Kronenberg-and-Carlos-Guerra-11.jpg\" alt=\"image\" width=\"100\" height=\"74\" align=\"top\" /></div></td>\r\n<td height=\"100\" align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/2Jennifer-Kronenberg-and-Carlos-Guerra-11.jpg\" alt=\"image\" width=\"98\" height=\"127\" align=\"top\" /></div></td>\r\n<td align=\"center\" valign=\"top\">\r\n<div><img src=\"http://www.artcircuits.com/newsletters/images/Carlos-11.jpg\" alt=\"image\" width=\"100\" height=\"99\" /></div></td>\r\n</tr>\r\n<tr>\r\n<td width=\"100\" align=\"center\" valign=\"top\">\r\n<div>Jennifer Kronenberg and Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n<td width=\"100\" height=\"0\" align=\"center\" valign=\"top\">\r\n<div>Jennifer Kronenberg and Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n<td width=\"100\" height=\"0\" align=\"left\" valign=\"top\">\r\n<div>Carlos Guerra in Romeo and Juliet. Photo © 2009 Lois Greenfield.</div></td>\r\n</tr>\r\n</tbody>\r\n</table>\r\nMore<a href=\"http://www.miamicityballet.org/\"> www.miamicityballet.org</a>",
        "post_title": "Miami City Ballet - April 2011",
        "post_excerpt": "",
        "post_status": "publish",
        "comment_status": "open",
        "ping_status": "open",
        "post_password": "",
        "post_name": "miami-city-ballet-april-2011",
        "to_ping": "",
        "pinged": "",
        "post_modified": "2011-04-14 16:54:57",
        "post_modified_gmt": "2011-04-14 21:54:57",
        "post_content_filtered": "",
        "post_parent": "0",
        "guid": "http://artcircuits..com/?p=273",
        "menu_order": "505",
        "post_type": "post",
        "post_mime_type": "",
        "comment_count": "0",
        "pod_item_id": "273"
    },
    "thumbnail": false,
    "caption": "<!-- [if gte mso 9]><xml>\n<o:DocumentProperties>\n<o:Template>Normal.dotm</o:Template>\n<o:Revision>0</o:Revision>\n<o:TotalTime>0</o:TotalTime>\n<o:Pages>1</o:Pages>\n<o:Words>33</o:Words>\n<o:Characters>191</o:Characters>\n<o:Company>lpa2790</o:Company>\n<o:Lines>1</o:Lines>\n<o:Paragraphs>1</o:Paragraphs>\n<o:CharactersWithSpaces>234</o:CharactersWithSpaces>\n<o:Version>12.0</o:Version>\n</o:DocumentProperties>\n<o:OfficeDocumentSettings>\n<o:AllowPNG></o:AllowPNG>\n</o:OfficeDocumentSettings>\n</xml><![endif]--><!-- [if gte mso 9]><xml>\n<w:WordDocument>\n<w:Zoom>0</w:Zoom>\n<w:TrackMoves>false</w:TrackMoves>\n<w:TrackFormatting></w:TrackFormatting>\n<w:PunctuationKerning></w:PunctuationKerning>\n<w:DrawingGridHorizontalSpacing>18 pt</w:DrawingGridHorizontalSpacing>\n<w:DrawingGridVerticalSpacing>18 pt</w:DrawingGridVerticalSpacing>\n<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>\n<w:DisplayVerticalDrawingGridEvery>0</w:DisplayVerticalDrawingGridEvery>\n<w:ValidateAgainstSchemas></w:ValidateAgainstSchemas>\n<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>\n<w:IgnoreMixedContent>false</w:IgnoreMixedContent>\n<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>\n<w:Compatibility>\n<w:BreakWrappedTables></w:BreakWrappedTables>\n<w:DontGrowAutofit></w:DontGrowAutofit>\n<w:DontAutofitConstrainedTables></w:DontAutofitConstrainedTables>\n<w:DontVertAlignInTxbx></w:DontVertAlignInTxbx>\n</w:Compatibility>\n</w:WordDocument>\n</xml><![endif]--><!-- [if gte mso 9]><xml>\n<w:LatentStyles DefLockedState=\"false\" LatentStyleCount=\"276\">\n</w:LatentStyles>\n</xml><![endif]-->\n\n<!-- [if gte mso 10]>\n\n<style>\n /* Style Definitions */\ntable.MsoNormalTable\n{mso-style-name:\"Table Normal\";\nmso-tstyle-rowband-size:0;\nmso-tstyle-colband-size:0;\nmso-style-noshow:yes;\nmso-style-parent:\"\";\nmso-padding-alt:0in 5.4pt 0in 5.4pt;\nmso-para-margin:0in;\nmso-para-margin-bottom:.0001pt;\nmso-pagination:widow-orphan;\nfont-size:12.0pt;\nfont-family:\"Times New Roman\";\nmso-ascii-font-family:Cambria;\nmso-ascii-theme-font:minor-latin;\nmso-fareast-font-family:\"Times New Roman\";\nmso-fareast-theme-font:minor-fareast;\nmso-hansi-font-family:Cambria;\nmso-hansi-theme-font:minor-latin;}\n</style><![endif]-->\n\n<!--StartFragment-->\n<h3></h3>\n<h3></h3>\n<!--EndFragment-->",
    "id": 1
},

这是我的完整 json http://artcircuits.com/wp-json/pods/art_places.. 使用一些 json 在线查看器

<ion-view view-title="WYNWOOD ARTS DISTRICT">
<ion-content class="padding" style="background-color: #E5E5E4; color:#8B7447; top:54px">
         <ul class="list" ng-repeat="equis in arreglo">
                <a href="#" class="item " >{{equis.name}}</a>

        </ul>

嗯，我有我所有的对象.. 在一个 $scope.variable... 我想做下一个……

按art_type 数组 属性名称或索引....

过滤

请我需要一个简单的解决方案...也许在控制器中进行过滤...或其他什么...

Answer 1

一种方法是分两个步骤：

1. 将对象“展平”为更易于过滤的数组。 （在我的示例中，我使用 lodash 来执行此操作）
2. 在标记中使用常规角度过滤器。

这是example

这是内联代码： HTML：

<div ng-repeat="item in arr | filter: {art_type:filterByArtType}">
  {{item.name}}
</div>

JavaScript：

angular.module('myApp').controller('myCtrl', function($scope) {
  $scope.filterByArtType = 1;
  $scope.obj = {
    "1": {
    "id": 1,
    "name": "Miami City Ballet",
    ...
    "art_type": {
        "1": {
          "name": "Performing Arts"
        }
      }
     ...
    },
     ...
  };

  $scope.arr = _.chain($scope.obj)
    .values()
    .map( function(n) {
      n.art_type = _.keys(n.art_type)[0];
      return n;
    }).value();
});

更新：现在将扁平数组的“art_type”值设为“id”而不是名称。

Answer 2

您想要的是 angular 内置 filter 过滤器。它可以在ng-repeat 中使用，以限制数组的哪些元素用于在 DOM 中生成元素，而无需修改源数组。

Official angular documentation for filter filter.