Question

我遇到了需要采取以下JSON响应的场景：

[
    {
        "url":"http://myurl1",
        "tags":"tag 1.1,tag1.2,tag1.3"
    },
    {
        "url":"http://myurl2",
        "tags":"tag 2.1,tag2.2"
    }
]

最后：

<a href="http://myurl1">tag 1.1</a>
<a href="http://myurl1">tag 1.2</a>
<a href="http://myurl1">tag 1.3</a>

<a href="http://myurl2">tag 2.1</a>
<a href="http://myurl2">tag 2.2</a>

我已经在jQuery中构建了这个，只需在每个循环中存储url，将标记拆分为一个数组然后循环输出到<a>标记，同时拉入先前存储的单个实例的URL。我真的很努力地切换到角度，这里基本上就是我所拥有的。我有一种感觉，我感到过于复杂，不管你信不信，我已经搜索了很长时间并且已经打了几个小时。

如果json数据持平，我会完成，但因为它不会被卡住。

我有这个，这很好，除了它将所有标签转储到单个<a>元素中，而不是我需要的。我假设我不会在这里创建一个嵌套循环，所以在控制器上：

标记：

<body ng-app="MyApp">
    <div ng-controller="TagCtrl">
        <a ng-repeat="tag in tags" href="{{tag.url}}">{{tag.tags}}</a>
    </div>
</body>

控制器：

app.controller("TagCtrl", function($scope, $http) {
  $http.get('data/tags.json').
    success(function(data, status, headers, config) {
      $scope.tags = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

我只是不知道我将标签数据拆分成一个数组并循环遍历它，即使我这样做了，如何将其恢复到视图中？我的直觉告诉我，这应该是一个指令，但我现在试图让它尽可能简单。

最后一点，我没有能力改变JSON结构。

Answer 1

从你的json回复（让我们称之为data）：

var tags = [];

// Loop on every response item
for (var i = 0; i < data.length; i++) {

  // Get all tags from this response item
  var splits = data[i].tags.split(',');

  for (var j = 0; j < splits.length; j++) {
    tags.push({url: data[i].url, tag: splits[i]});
  }
}

// Put the array into our scope
$scope.tags = tags;

然后你可以使用你的模板：

<a ng-repeat="tag in tags" href="{{tag.url}}">{{tag.tag}}</a>

Answer 2

你可以这样做：

success(function(data, status, headers, config) {
    $scope.tags = [];
    data.forEach(function(urlObject) {
        // Get array of tags from the string of tags
        var tagsList = urlObject.tags.split(',');
        tagsList.forEach(function(tag) {
             $scope.tags.push({
                url: urlObject.url,
                tag: tag
             });    
        });
    });
})

然后使用您拥有的相同HTML。

Answer 3

目前，您正在尝试显示$ scope上尚不存在的值。即＆＃34;标记＆＃34;。 $ scope的唯一变量是帖子。如果你想以当前的方式继续你的html需要这样：

<body ng-app="MyApp">
    <div ng-controller="TagCtrl">
        <div ng-repeat="post in posts">
            <a ng-repeat="tag in post.tags" href="{{post.url}}">{{tag}}</a>
        </div>
    </div>
</body>

然而，这不会将您的标签分开。我还没有对此进行测试，但它应该有效：

(function(){
    app.controller('tagCtrl', tagCtrl);

    tagCtrl.$inject = ['$scope', '$http'];
    function tagCtrl($scope, $http){
        $scope.posts = [];

        $http.get('data/tags.json')
             .success(function(data){
                $scope.posts = data;
                $scope.posts.forEach(function(post){
                    post.splitTags = post.tags.split(",");
                });
             })
             .error(function(data, status, headers, config) {
                // log error
              });
    }
})();

<body ng-app="MyApp">
    <div ng-controller="tagCtrl">
        <div ng-repeat="post in posts">
            <a ng-repeat="tag in post.splitTags" href="{{post.url}}">{{tag}}</a>
        </div>
    </div>
</body>

在更新角度视图之前，如何操作从JSON响应派生的对象？

3 个答案: