Угловая страница JS с более чем 10 параметрами поиска

Question

Я новичок в Angular JS, и я создаю html-страницу, где у нее есть более 12 вариантов поиска, доступных пользователю.

Теперь я должен создать 12 отдельных функций для вызова API REST для извлечения данных поиска, есть ли лучший способ справиться с этим.

Я также хотел бы знать, нет ли найденных результатов поиска. Должен ли я держать пользователя на одной странице или переносить их на следующую страницу и отображать элементы не найдены?

Как я могу реализовать это Я использую угловой ui-router, чтобы идти между страницами.

Я также хотел бы знать, как я могу отображать что-то вроде поиска в процессе (загрузка изображения), когда пользователь нажимает какую-либо кнопку.

Заранее благодарим за входные данные.

Answer 1

У вас может быть одна функция и передать значение всего поиска в этой функции. Это повысит производительность вашей страницы. Если результат не найден, вы можете скрыть данные div (где u r собирается показывать данные) и показать div без каких-либо данных.

Answer 2

Вы можете попробовать, как этот

<div class="panel panel-default">   
     <div class="panel-body"> 
       <div class="row"> 
        <form role="search"> 
         <div class="col-md-12"> 
          <div class="form-group col-md-3"> 
           <input type="text" id="name" ng-model="searchQuery.name" placeholder="Name" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="text" id="mobile-number" ng-model="searchQuery.mobileNumber" placeholder="Mobile Number" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="email" id="email" ng-model="searchQuery.emailId" placeholder="Email Id" class="form-control"/> 
          </div>      
         </div> 
         <div class="col-md-12"> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter4" placeholder="filter4" class="form-control"/> 
           </div> 
           <div class="form-group col-md-3"> 
            <input type="text" ng-model="searchQuery.filter5" placeholder="filter5" class="form-control"/> 
           </div> 
           <div class="form-group col-md-3"> 
            <input type="text" ng-model="searchQuery.filter6" placeholder="filter6" class="form-control"/> 
           </div>   
          </div> 
         <div class="col-md-12"> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter7" placeholder="filter7" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter8" placeholder="filter8" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter9" placeholder="filter9" class="form-control"/> 
          </div>   
          </div> 
         <div class="col-md-12"> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter10" placeholder="filter10" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="number" ng-model="searchQuery.filter11" placeholder="filter11" class="form-control"/> 
          </div> 
          <div class="form-group col-md-3"> 
           <input type="text" ng-model="searchQuery.filter12" placeholder="filter12" class="form-control"/> 
          </div>   
         </div> 
         <div class="col-md-12"> 
          <div class="form-group col-md-1"> 
           <button class="btn btn-info" id="search" type="button" ng-click="search(searchQuery, 0)"> 
            Search 
           </button> 
          </div> 
          <div class="form-group col-md-1"> 
           <button class="btn btn-info" id="clear" type="button" ng-click="clearSearch()"> 
            Clear 
           </button> 
          </div>  
         </div> 
        </form> 
       </div> 
       <loading></loading> 
       <div class="table-responsive"> 
        <table class="table table-bordered table-striped table-condensed table-hover" ng-show="!loading"> 
        <thead> 
         <tr> 
          <th>#</th> 
          <th>Name</th> 
          <th>Mobile Number</th> 
          <th>Email Id</th> 
          <th>Address</th>         
          <th><a ng-click="sortBy('user.createdDate')">Added Date</a></th> 
          <th class="text-center">Action</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td class="no-data" colspan="8" ng-show="itemList.length === 0">No Record found</td> 
         </tr> 
         <tr ng-repeat="user in itemList track by user.id"> 
          <td>{{$index + index}}</td> 
          <td>{{user.fullName}}</td> 
          <td>{{user.mobileNumber}}</td> 
          <td>{{user.emailId}}</td>       
          <td>{{user.address}}</td>       
          <td>{{user.createdDate |date:'dd-MM-yyyy'}}</td>        
         </tr> 
        </tbody> 
       </table> 
      </div> 
     <pagination ng-show="!loading && totalItems > itemsPerPage" boundary-links="true" ng-change="pageChanged(currentPage)" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" max-size="10" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination> 
    </div> 
    </div> 

контроллер SearchCtrl

app.controller('SearchCtrl', function ($scope, $state, orderByFilter, SearchFactory) { 

    /** 
    * Initialization 
    */ 
    $scope.index = 1; 
    $scope.pageTitle = 'Listing'; 
    $scope.searchQuery = {}; 
    $scope.searchQuery.pageSize = 50; 
    $scope.searchQuery.pageNo = 0; 
    $scope.itemList = []; 
    $scope.itemsPerPage = 50; 

    /** 
    * Search 
    * @param SearchQuery : Search object contains various values for search. 
    * @param PageNo : Requesting data for particular page number . 
    */ 
    $scope.search = function(searchQuery, pageNo) { 
     searchQuery.pageNo = pageNo; 
     $scope.loading = true; 
     SearchFactory.get({'searchQuery':angular.toJson(searchQuery)}, function(response) { 
      $scope.loading = false; 
      $scope.itemList = response.items; 
      $scope.itemsPerPage = response.pageSize; 
      $scope.totalItems = response.count; 
      $scope.searchQuery = searchQuery; 
     }, function(e) { 
      $scope.loading = false; 
      console.error(e); 
     }); 
    }; 
    /** 
    * Load default item list 
    */ 
    $scope.search($scope.searchQuery, 0); 
    /** 
    * Fetch data for selected page. 
    */ 
    $scope.pageChanged = function (currentPage) { 
     $scope.index = 1 + ($scope.searchQuery.pageSize * (currentPage - 1)); 
     $scope.searchQuery.pageNo = currentPage -1; 
     $scope.search($scope.searchQuery, currentPage -1); 
    }; 
    /** 
    * Clear search parameters. 
    */ 
    $scope.clearSearch = function() { 
     $scope.index = 1; 
     $scope.searchQuery = {}; 
     $scope.searchQuery.pageSize = 50; 
     $scope.searchQuery.pageNo = 0; 
     $scope.currentPage = 1; 
     $scope.search($scope.searchQuery,0); 
    }; 
    /** 
    * sort column 
    * @param propertyName : Column name 
    */ 
    $scope.sortBy = function(propertyName) { 
     $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false; 
     $scope.propertyName = propertyName; 
     $scope.itemList = orderByFilter($scope.itemList, $scope.propertyName, $scope.reverse); 
    }; 
}); 

загрузки директива

app.directive('loading', function() { 
    return { 
     restrict: 'E', 
     replace:true, 
     template: '<div class="loading"><span> <img src="assets/images/spinner.gif" width="60" /></span></div>', 
     link: function (scope, element, attr) { 
      scope.$watch('loading', function (val) { 
       if (val) 
        $(element).show(); 
       else 
        $(element).hide(); 
      }); 
     } 
    }; 
}); 

UI-маршрутизатор состояние

state('app.user-search', { 
      url: '/search', 
      templateUrl: 'user/user-search.html', 
      controller: 'SearchCtrl',   
})