如何在 Angular js 中获取和搜索数据？ [复制]答案

【问题标题】：How to fetch and search data in angular js? [duplicate]如何在 Angular js 中获取和搜索数据？ [复制]
【发布时间】：2019-03-07 08:54:49
【问题描述】：

我的范围内有两个函数 fetch_orders 和 search_order。 fetch_order 函数运行良好，但是当我单击搜索按钮时，search_order 函数执行并显示错误消息 Error: [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>

【问题讨论】：

关于“更好的方法”：这通常是用户服务在 AngularJS 应用程序中处理数据的好方法。官方文档相当复杂（在我看来），但你会发现很多这样的教程：w3schools.com/angular/angular_services.asp

标签： javascript angularjs frontend

【解决方案1】：

首先，请在函数开始时初始化你的 $scope.orders 变量：

$scope.orders = [];

并且不要给它分配null 值。

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

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

附注：最好不要写在 $scope 上 - 尝试使用“控制器作为”语法。这已经从 angularJS 1.2 引入（如果我没记错的话）。

【讨论】：