ng-repeat显示不存在的数据

时间:2017-08-16 01:00:23

标签: javascript angularjs

我通过函数动态使用数据加载,然后使用ng-repeat填充。

以下是控制器代码。

$scope.loadproducts = function(item_id) {

        var pdata = $.param({
            item_id : item_id,
        });

        $http({
          method: 'POST',
          url: baseurl + 'api/get_items_in_category_cart',
            data: pdata,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {
            $scope.items = response.data.products;
            $scope.description = response.data.description;
            console.log($scope.items);
             $timeout(apply_tooltip, 500);
        }, function errorCallback(response) {

        });
    }; 

查看

<div class="container col-md-6" ng-repeat="item in items">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 class="panel-title">{{ item.title }}</h4>
        </div>
        <div class="panel-body">
            <div class="col-md-3 col-xs-5"><a href="#" class="thumbnail"><img ng-src="{{ item.thumbnail }}"></a></div>
            <div class="col-md-9" style="">
                <div class="row">
                    <div class="col-md-12">
                        <span style="font-size: 14px; font-weight: 500;">{{ item.description }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 text-right" style=" text-align: left;">
                        <p>{{item.price | currency:"NZ $"}}</p>
                    </div>
                    <div class="col-md-8" style="  text-align: left;">

                        <input type="text" value="{{item.qty}}" style="width:50px; height: 28px; line-height: 28px;" readonly id="qty_{{item.id}}"/>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在初始页面加载时,代码执行它应该执行的操作。 有一个继续按钮,用户可以将其带到另一个页面。 如果用户返回,则应该重新加载项目。

问题是在重新加载应该显示每个项目的数量的文本框 - &gt;&gt; value =“{{item.qty}}”似乎显示所有数量文本框的相同数量,无论它们具有原始数量。

console.log($ scope.items)显示了它应该具有的正确值。这只是显示错误数量的显示。

任何想法的人?

1 个答案:

答案 0 :(得分:0)

如果您的数据已正确加载,您可以采用两种方式:

1 - 尝试在输入中使用ng-model

<input type="text" ng-model="item.qty" style="width:50px; height: 28px; line-height: 28px;" readonly id="qty_{{item.id}}"/>

您可以删除&#39; readonly&#39;属性并添加ng-disabled =&#34; true&#34;。

2 - 您可以在获得新值之前尝试清除列表。因此,在您从后端再次加载值之前,您可以清除数据:

$scope.items = [];

请求完成后再次输入数据。

请注意,第二种解决方案不是常规解决方案,应该在您无法找到其他解决方案的情况下使用。