2015-05-20 3 views
0

Я использую AngularJS для загрузки содержимого AJAX и использования ng-repeat для создания списка элементов. В содержании у меня также есть {{существительное}} в качестве заполнителя. Мое предположение заключалось в том, что когда содержимое ajax загружается, AngularJS автоматически заменяет {{существительное}} данными из модели $ scope.noun. Но это не так. Любой быстрый и грязный способ сделать это?AngularJS - Связывание/Замена содержимого AJAX

Вот мой код:

AllControllers.controller('AppController', ['$scope', '$http', function ($scope, $http) { 

    $scope.noun = "My Noun"; 

    $scope.headlines = [{ 
     headline: "Top 10 Tricks to {{noun}}", 
     usage: 10, 
     votes: 100 
    }]; 

    $scope.load_headlines = function() { 
     $http.get('/data/headlines.json'). 
      success(function(data, status, headers, config){ 
       $scope.headlines = data; 
      }). 
      error(function(data, status, headers, config){ 
       console.log(status); 
      }); 
    }; 
    }]); 

<div ng-controller="AppController" ng-init="load_headlines()"> 

    <table> 
    <tbody ng-repeat="headline in headlines"> 
    <tr> 
     <td>{{headline.headline}}</td> 
     <td class="center">{{headline.usage}}</td> 
     <td class="center">{{headline.votes}}</td> 
    </tr> 
    </tbody> 
    </table> 

</div> 
+0

Где код Ajax вы говорите? – devnull69

+0

Я не думал, что нужно включить вызов ajax. Потому что в конце дня строки $ scope.head будут представлять собой массив объектов. А заголовок атрибута будет иметь местозаполнитель {{существительное}}. Итак, как вы заполняете $ scope.headlines, возможно, не актуально. – roosevelt

+0

Откуда: headlines_displayed? – devnull69

ответ

1

вы можете привязки {{Луна}} в тд повторяется.

изменить код так:

AllControllers.controller('AppController', ['$scope', '$http', function ($scope, $http) { 

    $scope.noun = "My Noun"; 

    $scope.headlines = [{ 
     headline: "Top 10 Tricks to ", 
     usage: 10, 
     votes: 100 
    }]; 
}]); 

<tbody ng-repeat="headline in headlines_displayed"> 
<tr> 
    <td>{{headline.headline}} {{noun}}</td> 
    <td class="center">{{headline.usage}}</td> 
    <td class="center">{{headline.votes}}</td> 
</tr> 
</tbody> 
+0

Это не сработает. Потому что я заполняю $ scope.headlines, используя вызов ajax. Строки $ scope.head являются динамическими. – roosevelt

+0

Я обновляю свой ответ, вы можете привязать параметры буксировки в html; – user3227295

1

Ваши переменные $ сферы является по-разному переменной ngRepeat. Я думаю, что вы должны изменить переменную области видимости $ в контроллере:

$scope.headlines_displayed = [{ 
     headline: "Top 10 Tricks to "+$scope.noun, 
     usage: 10, 
     votes: 100 
    }]; 
0

Фигурные его. Закончилось это:

<td>{{headline.headline.replace("{{noun\}\}", noun)}}</td> 
0

Вы должны использовать службу интерполяции $, чтобы скомпилировать строку, прежде чем назначать ее области. Передача строки с {{}} не будет работать. В вашем обратном вызове http-успеха сделайте что-нибудь подобное. Это заменит ваше {{существительное}} значением области.

$scope.load_headlines = function() { 
    $http.get('/data/headlines.json'). 
     success(function(data, status, headers, config){ 
      $scope.headlines = data; 
      $interpolate($scope.headlines.headline)($scope); 
     }). 
     error(function(data, status, headers, config){ 
      console.log(status); 
     }); 
}; 
}]); 

Возьмите взгляд на это fiddle

Смежные вопросы