Question

我正在尝试对从api获取的数据使用ng-repeat（作为JSON返回）当我在函数结束之前执行console.log（$ scope.wines）时它保存了值但是然后在函数结束时，$ scope.wines再次为空。我觉得这导致了我的ng-repeat =＆＃34;葡萄酒中的葡萄酒＆＃34;没有正确显示。

这是我的JS：

app.controller("MainController", function($scope){

        var api_key = "22x";
        $scope.wines = [];

        // Search Wine Function
    $scope.SearchWine = function(){
        $scope.wines = [];
        var search_api_url = "http://services.wine.com/api/beta2/service.svc/json/catalog?search=" + $scope.wine + "&size=200&apikey=" + api_key;
        var i = 1;

        $("#wine_list").html("");
        $(".loading").show();
        $(".alert").hide();
        $("input[type='text']").val("").focus();


        $.getJSON(search_api_url, function(data) {

            $.each(data, function(key, value) {

                if(key == "Products") {

                    $.each(value.List, function(k, v) {
                        $scope.wines.push(v);
                    });

                    console.log($scope.wines);
                    $(".loading").hide();
                }

            });
            console.log($scope.wines);
        });
        console.log($scope.wines);

    }; //End SearchWine


    });

这是我的HTML

    <div ng-controller="MainController">
    <header>
        <a href="http://powersearch.bestwine.com" class="brand">
            <img src="assets/images/logo.png" alt="">
        </a>
        <div class="col-md-6 col-md-offset-3">
            <form class="search_form">
                <div class="input-group">
              <input type="text" class="form-control" ng-model="wine" placeholder="Search by Winery or AVA...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit" ng-click="SearchWine()">Search</button>
              </span>
            </div><!-- /input-group -->
            <p class="help-block">You can also search international! Try typing in 'Burgundy'</p>
            </form>
        </div>
    </header>

    <div class="container">
        <div class="col-md-12">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th class='text-center'>#</th>
                        <th>Wine Name</th>
                        <th>Wine Appellation</th>
                        <th>Wine Price</th>
                        <th>Favorite</th>
                    </tr>
                </thead>
                <tbody id="wine_list">
                    <tr ng-repeat="wine in wines">
                        <td>{{ wine.Name }}</td>
                        <td>{{ wine.Appellation.Name }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="alert alert-info">Type in above to start.</div>
        </div>
    </div>

</div>

以下是运行时控制台显示的内容：

enter image description here

如果您还有其他需要，请告诉我们！

Answer 1

使用$ resource或$ http来获取数据而不是jQuery $ .getJson

这里有详细的答案：AngularJS: factory $http.get JSON file

另外，请避免在Angular代码中使用这样的jQuery：

$("#wine_list").html("");
$(".loading").show();
$(".alert").hide();
$("input[type='text']").val("").focus();
...

这样的任务可以通过角度指令ng-show，ng-hide等来处理。

$ scope数组不保留ng-repeat的值

1 个答案: