Angularjs使用其他对象

时间:2015-09-18 22:29:00

标签: javascript json angularjs angularjs-ng-repeat angular-filters

我有以下Json文件......

生病显示你只有一个对象...... 我有154具有相同的结构我希望过滤名称...当在 art_type.name =' - 某事...... - '

{
"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数组属性名称或索引过滤....

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

2 个答案:

答案 0 :(得分:0)

一种方法是分两步:

  1. &#34;平坦化&#34;将对象转换为更容易过滤的数组。 (在我的例子中,我使用lodash来做这件事)
  2. 在标记中使用常规角度过滤器。
  3. 这里是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();
    });
    

    更新:现在制作扁平阵列&#34; art_type&#34;价值是&#34; id&#34;而不是名字。

答案 1 :(得分:0)

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

Official angular documentation for filter filter