如何在angular js中获取和搜索数据?

时间:2019-03-07 08:54:49

标签: javascript angularjs frontend

我的范围内有两个函数fetch_orders和search_order。 fetch_order函数运行良好,但是当我单击搜索按钮时,search_order函数执行并显示错误,提示错误:[ngRepeat:dupes]。这两个函数从数据库中获取数据并显示在客户端。有没有更好的方法来获取和搜索订单?

<div class="order-data" ng-repeat="order in orders" >
    <div class="ordered-product-image">
        <img width="90%"  src="product_images/{{order.product_image}}">
    </div>
    <div class="product-contents">
       <h4>Product</h4>
        <h5 data-ng-bind="order.brand_title"></h5>
        <p data-ng-bind="order.product_title"></p>
        <p data-ng-bind="order.tarif_value_name"></p>
      </div>
</div>


<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src = "js/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('orders-app', []);
    var start = 0;
    var limit = 3;

    var sStart=0;
    var slimit = 3;
    var isSearching=false;
    var sData="";
    var sFilter="";
    var n = 0;
    app.controller("order-content", function($scope, $http){

        $scope.fetch_orders=function(){
            isSearching = false;
            $http.post("_fetch_orders.php", {
                action:"fetch_all",
                "start":start,
                "limit":limit
            }).then(function(success){
                limit+=3;

                if(success.data.length > n){
                    $scope.orders = success.data;
                    n = success.data.length;
                } else {
                    limit-=3;
                }

            });
        }
        $scope.fetch_order();

        $scope.search_order = function(){
            n=0;
            isSearching = true;
            sFilter = $scope.search_filter;
            sData = $scope.search_data;

            if(sFilter!=null){
            $scope.orders=null;
            $http.post("_fetch_orders.php", {
                action: "search",
                start: sStart,
                limit: slimit,
                value: sData,
                column: sFilter
            }).then(function(success){
                    slimit+=3;
                    $scope.orders = success.data;
                });
            }
        }
});
</script>

1 个答案:

答案 0 :(得分:0)

首先,请在函数开始时初始化$ scope.orders变量:

$scope.orders = [];

也不要为其分配null值。

关于ngRepeat:dupes错误-请在此处检查:

Error: [ngRepeat:dupes] what does this mean?

附注:最好不要在$ scope上编写-尝试使用'controller as'语法。是从angularJS 1.2中引入的(如果我没记错的话)。