Question

我正在使用嵌套的json数据创建一些angularjs应用程序。面临在某些领域处理ngRepeat的问题。请参考下面的图片

var eventsApp = angular.module('eventsApp', []);
eventsApp.controller('locationController',
  function locationController($scope) {
    $scope.event = {
      "continents": [{
        "continentName": "Asia",
        "countries": [{
          "countryName": "India",
          "cities": [{
            "cityname": "Mumbai",
            "latLng": [19.139683, 72.881755],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>Gate #5, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>",
              "<div class='address'>Gate #6, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>"
            ]
          }, {
            "cityname": "Bangalore",
            "latLng": [12.967715, 77.596607],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>Plot No 25-31, EPIP 2nd Phase, Industrial Area, Whitefield, Bangalore-560066. India</div>"
            ]
          }, {
            "cityname": "Vadodara",
            "latLng": [22.297864, 73.168966],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>L&T Knowledge City, West Block, NH 8, Ajwa – Waghodia Crossing, Vadodara – 390 019, Gujarat, India Tel. : +91 265 245 1000</div>"
            ]
          }, {
            "cityname": "Mysore",
            "latLng": [12.306326, 76.629660],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>Mysore Complex, KIADB Industrial Area, Hebbal - Hootagalli, Mysore - 570018, India</div>"
            ]
          }, {
            "cityname": "Chennai",
            "latLng": [13.078007, 80.211203],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>Ganesh Office Building, New No. 50 (Old No. 130) Velachery Road, Saidapet, Chennai – 600015, India</div>"
            ]
          }]
        }, {
          "countryName": "Japan",
          "cities": [{
            "cityname": "YOKOHAMA",
            "latLng": [35.466913, 139.617877],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>Landmark Tower 37 F 2-2-1, Minatomirai, Nishi-ku, Yokohama,Kanagawa 220-8137</div>",
              "<div class='address'></div>",
              "<div class='address'></div>"
            ]
          }]
        }, {
          "countryName": "Singapore",
          "cities": [{
            "cityname": "",
            "latLng": [1.296961, 103.846253],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>80 Anson Road, #24-02 Fuji Xerox Towers, Singapore 079907</div>"
            ]
          }]
        }, {
          "countryName": "Korea",
          "cities": [{
            "cityname": "South Korea",
            "latLng": [36.354133, 128.184051],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>#102-604, 6th Floor, Daewoo World Mark Building, YeongTong Dong, YeongTong Gu, Suwon Si, Gyoenggi Do, South Korea</div>"
            ]
          }]
        }]
      }, {
        "continentName": "USA",
        "countries": [{
          "countryName": "",
          "cities": [{
            "cityname": "NEW JERSEY",
            "latLng": [39.575889, -74.906897],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>2035 Lincoln Highway Suite # 3000-3005, Edison Square West, Edison, NJ-08817</div>"
            ]
          }, {
            "cityname": "CONNECTICUT",
            "latLng": [41.646227, -72.870117],
            "pinColor": "#004b88",
            "addresses": [
              "<div class='address'>750 Main Street Suite # 704 Hartford, CT 06103</div>"
            ]
          }]
        }]
      }]
    }
  });

body {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  padding: 0;
  margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<div ng-app="eventsApp" ng-controller="locationController">
  <div class="container">
    <div class="navbar">
      <div class="navbar-inner">
        <ul class="nav">

        </ul>
      </div>
    </div>
    <div>
      <img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
      <div class="row">
        <div class="span1">
          <h2>{{event.name}} </h2>
        </div>
      </div>
      <hr />
      <ul class="thumbnail">
        <li ng-repeat="continent in event.continents">
          <div class="row session">
            <h2>{{continent.continentName}}</h2>
            <div class="well span9">
              <ul class="thumbnail">
                <li ng-repeat="countryName in event.countries">
                  <h2>{{countryName}}</h2>
                </li>
              </ul>
            </div>
            <div ng-repeat="cities in event.cities">
              <h3>{{cities}}</h3>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

我认为 json 结构addresses并不理想。请更改JSON数组或使用ng-bind-html="expression" https://docs.angularjs.org/api/ng/directive/ngBindHtml

作为初学者，我建议http://campus.codeschool.com/courses/shaping-up-with-angular-js/全面了解AngularJS。

演示：http://plnkr.co/edit/IpuZBohVyhhq0GCcokFm?p=preview

var eventsApp = angular.module('eventsApp', ['ngSanitize']);
eventsApp.controller('locationController', function($scope) {
  $scope.event = {
    "continents": [{
      "continentName": "Asia",
      "countries": [{
        "countryName": "India",
        "cities": [{
          "cityname": "Mumbai",
          "latLng": [19.139683, 72.881755],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Gate #5, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>",
            "<div class='address'>Gate #6, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>"
          ]
        }, {
          "cityname": "Bangalore",
          "latLng": [12.967715, 77.596607],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Plot No 25-31, EPIP 2nd Phase, Industrial Area, Whitefield, Bangalore-560066. India</div>"
          ]
        }, {
          "cityname": "Vadodara",
          "latLng": [22.297864, 73.168966],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>L&T Knowledge City, West Block, NH 8, Ajwa – Waghodia Crossing, Vadodara – 390 019, Gujarat, India Tel. : +91 265 245 1000</div>"
          ]
        }, {
          "cityname": "Mysore",
          "latLng": [12.306326, 76.629660],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Mysore Complex, KIADB Industrial Area, Hebbal - Hootagalli, Mysore - 570018, India</div>"
          ]
        }, {
          "cityname": "Chennai",
          "latLng": [13.078007, 80.211203],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Ganesh Office Building, New No. 50 (Old No. 130) Velachery Road, Saidapet, Chennai – 600015, India</div>"
          ]
        }]
      }, {
        "countryName": "Japan",
        "cities": [{
          "cityname": "YOKOHAMA",
          "latLng": [35.466913, 139.617877],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Landmark Tower 37 F 2-2-1, Minatomirai, Nishi-ku, Yokohama,Kanagawa 220-8137</div>",
            "<div class='address'></div>",
            "<div class='address'></div>"
          ]
        }]
      }, {
        "countryName": "Singapore",
        "cities": [{
          "cityname": "",
          "latLng": [1.296961, 103.846253],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>80 Anson Road, #24-02 Fuji Xerox Towers, Singapore 079907</div>"
          ]
        }]
      }, {
        "countryName": "Korea",
        "cities": [{
          "cityname": "South Korea",
          "latLng": [36.354133, 128.184051],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>#102-604, 6th Floor, Daewoo World Mark Building, YeongTong Dong, YeongTong Gu, Suwon Si, Gyoenggi Do, South Korea</div>"
          ]
        }]
      }]
    }, {
      "continentName": "USA",
      "countries": [{
        "countryName": "",
        "cities": [{
          "cityname": "NEW JERSEY",
          "latLng": [39.575889, -74.906897],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>2035 Lincoln Highway Suite # 3000-3005, Edison Square West, Edison, NJ-08817</div>"
          ]
        }, {
          "cityname": "CONNECTICUT",
          "latLng": [41.646227, -72.870117],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>750 Main Street Suite # 704 Hartford, CT 06103</div>"
          ]
        }]
      }]
    }]
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.angularjs.org/1.4.9/angular.js"></script>
<script src="//code.angularjs.org/1.5.5/angular-sanitize.min.js"></script>
<div class="container" ng-app="eventsApp" ng-controller="locationController">
  <div class="row">
    <div class="col-sm-12" ng-repeat="continent in event.continents">
      <h2>{{continent.continentName}}</h2>
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="country in continent.countries">
          <h3>{{country.countryName}}</h3>
          <div class="row">
            <div class="col-xs-6 col-md-4" ng-repeat="city in country.cities">
              <div class="thumbnail">
                <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{city.latLng[0]}},{{city.latLng[1]}}&zoom=12&size=400x400" alt="{{city.cityname}}">
                <div class="caption">
                  <h4>{{city.cityname}}</h4>
                  <div ng-repeat="address in city.addresses" ng-bind-html="address">{{address}}</div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

如何使用带有角度ngRepeat的嵌套json？

1 个答案: