Question

我需要访问＆＃34; city＆＃34;的值和＃＆＃34;国家＆＃34;在数组内部使用AngularJS和ng-repeat的以下json文件。

这是我的Json文件：

[
      {
        "name": "first",
        "location": [
            {
                "city" : "milan",
                "nation" : "italy"
            }
        ],
        "visibility": 1
      },
{
        "name": "second",
        "location": [
            {
                "city" : "new york",
                "nation" : "usa"
            },
            {
                "city" : "london",
                "nation" : "uk"
            }

        ],
        "visibility": 1
      }
]

我的问题是我需要将City和Nation作为文本字符串值，因为我需要在标记内添加它们作为css类名，基本上是这样的：

<div class="milan italy"></div>
<div class="new york usa london uk></div>

我无法弄清楚如何做到这一点。

我尝试使用此代码但未显示任何内容：

<div ng-repeat-start="tile in tiles"></div>
     <div class="mix {{ tile.location.city }} {{ tile.location.nation }}"></div>
<div ng-repeat-end></div>

提前感谢您的建议。

Answer 1

正如@MattDionis所说，你需要指定ng-class，而不仅仅是class。您可以尝试使用ng-class函数。所以你可以做到

<div ng-repeat="tile in tiles">
    <div ng-class="getLocation(tile)"></div>
</div>

$scope.getLocation = function(tile) {
    var resp = '';
    for (var i = tile.location.length; i-- > 0;) {
        resp = resp + tile.location[i].city + ' ' + tile.location[i].nation;
    }
    return resp;
}

我确信有更好的方式将它们组合起来，但这就是我现在提出的方法

Answer 2

首先，您希望使用ng-class而非简单class来正确评估这些绑定。

此外，tile.location似乎是一个对象数组，而不仅仅是一个对象。因此，{{ tile.location.city }}不起作用，但{{ tile.location[0].city }}应该有效。

剩下的问题是如何在ng-class内循环遍历多个城市/国家/地区值。我会回复你的。

Answer 3

请参阅下面的演示

您可以创建函数将对象数组转换为字符串，即：

 $scope.tostring = function (array) {
        var res = "";
        angular.forEach(array, function (obj) {

            console.log(obj);

            for (var k in obj) {
                if (obj.hasOwnProperty(k)) {
                    res += " " +obj[k];
                }
            }


        });
        return res;
    };

var app = angular.module('app', []);

angular.module('app').controller('homeCtrl', homeCtrl);

homeCtrl.inject = ['$scope'];

function homeCtrl($scope) {

  $scope.titles = [{
    "name": "first",
    "location": [{
      "city": "milan",
      "nation": "italy"
    }],
    "visibility": 1
  }, {
    "name": "second",
    "location": [{
        "city": "new york",
        "nation": "usa"
      }, {
        "city": "london",
        "nation": "uk"
      }

    ],
    "visibility": 1
  }];

  $scope.tostring = function(array) {
    var res = "";
    angular.forEach(array, function(obj) {

      console.log(obj);

      for (var k in obj) {
        if (obj.hasOwnProperty(k)) {
          res += " " + obj[k];
        }
      }


    });
    return res;
  };

}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-controller="homeCtrl">


  <div ng-repeat="title in titles">
    <h3 ng-class="tostring(title.location)">{{title.name}} My class is:*{{tostring(title.location)}}* </h3>

   


  </div>
</body>

</html>

使用ng-repeat在AngularJS中打印嵌套的JSON数组值

3 个答案: