Я столкнулся со сценарием, где мне нужно взять следующий ответ 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.

3
omenclature 17 Дек 2015 в 01:21

3 ответа

Лучший ответ

Вы могли сделать:

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, что и у вас.

0
Lucas 16 Дек 2015 в 23:13

В настоящее время вы пытаетесь отобразить значение, которое еще не существует в $ scope. то есть "метка". Единственная переменная в $ scope - это posts. Если вы хотите продолжить текущим способом, ваш 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>
0
DanielC 16 Дек 2015 в 23:11

Из вашего ответа 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>
0
floribon 16 Дек 2015 в 22:31