Question

我使用AngularJS加载AJAX内容并使用ng-repeat创建项目列表。在内容上我还有{{noun}}作为占位符。我的假设是，当加载ajax内容时，AngularJS会自动用$ scope.noun模型中的数据替换{{noun}}。但事实并非如此。任何快速而肮脏的方式来实现它？

这是我的代码：

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>

Answer 1

你可以在重复的td中绑定{{moon}}。

更改代码如下：

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>

Answer 2

您的$ scope变量与ngRepeat变量不同。我认为你必须更改控制器中的$ scope变量：

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

Answer 3

想出来。结束这样做：

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

Answer 4

您应该使用$ interpolate服务来编译字符串，然后再将其分配给范围。使用{{}}传递字符串将不起作用。在你的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

AngularJS - 绑定/替换AJAX内容

4 个答案: