Question

我有一个div，我想在它们旁边添加带有文本的复选框。

我从数据库中获取此文本，并在javascript中添加我想要的html格式和文本的数组：

$scope.list = service.getTextList();

从函数返回titles数组，然后分配$ scope变量：

<div class="checkbox" ng-repeat="item in list">
    {{ item }}
</div>

但是，当我尝试对该数组进行ng-repeat时，复选框和文本不会显示。

list

将范围记录到控制台时，有一个名为console.log($scope)的范围变量：console.log($scope.list)。我发现奇怪的是，当我记录$scope.list = ['1', '2', '3']时，它显示一个空数组...如果我明确地执行$scope.list = service.getTextList();，则ng-repeat有效，所以我猜问题就在这一行{{ 1}}

我该如何解决这个问题？

修改我服务中的getTextList（）函数：

getTextList: function(){
    return textList;
}

编辑2 我的服务，我获取我的数据并返回文本列表：

app.service('service', function() {
    var textList = [];

    return {
        getTextList: function(){
            return textList;
        },
        dataQuery: function() {
            var text = "";
            . 
            . 
            .
            query.find({
                success: function (results) {
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        text = " " + object.get('text');
                        textList.splice(textList.length , 0, text);
                    }
            . 
            . 
            .

我的HTML：

<div class="checkbox" ng-repeat="item in list">
    <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

我的控制器保持不变 - 尽管分配给$ scope.list变量的数组不包含html。正如建议的那样，这只是数据。首先，我在我的服务中调用dataQuery函数，然后调用getTextList函数。

编辑3 工作代码。我在$scope.list = service.getTextList();附近添加了以下内容：

$timeout(function(){
    $scope.list = service.getTextList();
}, 150);

150毫秒超时为查询提供了完成获取将分配给$ scope.list变量的数据的时间。

Answer 1

最佳实践

不要使用服务以你的方式操纵DOM，这是一种不好的做法。而是使用您的服务来获取您的文本数组，然后在控制器中实例化它。

从控制器中你可以绑定返回到$scope的数组，在你的html中你应该有这样的东西

<div class="checkbox" ng-repeat="item in list">
  <label class="smallPadding"><input type="checkbox">{{ item }}</label>
</div>

如果我明白你要做什么，那就是这样。

Answer 2

每当您从后端填充列表时，您会看到后端呼叫需要一些时间。使用ng-if是我认为最好的选项之一，因为在数组有值之前不会加载该元素。使用当前方法，无法保证即使在150毫秒内您也将获得数据。希望它可以帮助某人。

Angular ng-repeat不会迭代包含html的字符串项数组

2 个答案: