angulaire comment obtenir des valeurs de modèle ng et passer dans params

Question

Je suis nouveau à l'aide angulaire

moi d'obtenir la valeur de ng modèle et les passer dans $ httpparams pour obtenir JSON réponse,

et je ne sais pas comment afficher les résultats en utilisant mon propre modèle en ng répétition

<script> 
    var myApp = angular.module("orderApp", []); 
    myApp.controller("ArchiveController", function ($scope, $http) { 
     console.log($scope.fromdate); 
     console.log($scope.todate); 

     $http({ 
      url: "@Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)", 
      method: "GET", 
      params: { fromDate: '1396-01-01', toDate: '1396-01-17' } 
// i should use $scope.fromdate & $scope.todate here 
     }) 
     .then(function (response) { 
      $scope.orderArchive = response.data; 
      console.log(response.data); 
     }); 

    }); 
    </script> 

Voici mon code HTML

<div ng-app="orderApp"> 
     <div ng-controller="ArchiveController"> 

      <h2 class="title">بایگانی سفارش‌ها</h2> 
      <div class="form-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="txtFromDate">از تاریخ:</label> 
        <div class="col-sm-4"> 
         <input type="text" class="form-control fromDate" id="txtFromDate" ng-model="fromdate" placeholder="@Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="@Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")"> 
        </div> 
        <label class="col-sm-2 control-label" for="txtToDate">تا تاریخ:</label> 
        <div class="col-sm-4"> 
         <input type="text" class="form-control toDate" id="txtToDate" ng-model="todate" placeholder="@Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="@Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")"> 
        </div> 
       </div> 
       <a class="btn btn-primary btn-block searchInArchive" ng-href="#">جستجو</a> 
      </div> 
      <hr /> 

<!-- Template html code: --> 
      <div class="results"> 
       <div class="panel-group" role="tablist" aria-multiselectable="true" data-day="2" ng-repeat="order in OrderArchive"> 
        <h3 class="dayName"></h3> 
        <div class="panel panel-default orderItem"> 
         <div class="panel-heading" role="tab"> 
          <span class="description"></span> 
          <h4 class="panel-title"> 
           <a role="button" data-toggle="collapse" data-parent="#day-1" href="#order-{{order.id}}" aria-expanded="true" aria-controls="collapse-one"> 
            فاکتور #{{order.id}} 
           </a> 
          </h4> 
         </div> 
         <div class="panel-collapse collapse in" id="order-{{order.id}}" role="tabpanel" aria-labelledby="orderHeader-{{order.id}}"> 
          <div class="panel-body orderInfo"> 
           <div class="row borderBottom"> 
            <div class="col-xs-12 col-sm-6"> 
             زمان سفارش: <b>{{order.orderDatetime}}</b> 
            </div> 
            <div class="col-xs-12 col-sm-6"> 
             سفارش‌دهنده: <b>{{order.ordererFullName}} — {{order.ordererUserName}}</b> 
            </div> 
            <div class="col-xs-12"> 
             آدرس: <b>{{order.ordererAddress}}</b> 
            </div> 
           </div> 
           <div class="row borderBottom"> 
            <div class="col-xs-12"> 
             سفارش‌ها: 
             <div ng-repeat="food in order.foods"> 
              <b> 
               <i class="howMany" data-food="{{food.id}}"> عدد</i> 
               <span class="foodMenu">{{food.menuName}}</span> 
               <span data-toggle="tooltip" data-placement="auto" data-html="true" title="" data-original-title="{{food.price}} تومان">{{food.name}}</span> 
              </b> 
             </div> 
             — 
            </div> 
           </div> 
           <div class="row borderBottom"> 
            <div class="col-xs-12 col-sm-3"> 
             درگاه پذیرنده: <b>{{order.bank}}</b> 
            </div> 
            <div class="col-xs-12 col-sm-3"> 
             کد رهگیری تراکنش: <b>{{order.orderReferenceId}}</b> 
            </div> 
            <div class="col-xs-12 col-sm-3"> 
             مبلغ: <b class="orderAmount">{{order.orderAmount}}</b> 
            </div> 
            <div class="col-xs-12 col-sm-3"> 
             وضعیت سفارش: <b data-toggle="tooltip" data-placement="auto" data-html="true" title="" class="text-success" data-original-title="123">{{order.orderlevel}}</b> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

S'il vous plaît aidez-moi à trouver la solution.

Answer 1

Il semble que vous ne déclariez pas les variables $scope.formdate et $scope.todate à l'intérieur de votre contrôleur. Essayez le code ci-dessous, la première chose à faire est de déclarer les variables. Ensuite, pour les ajouter au params, il vous suffit de mettre ces variables à la place des constantes que vous avez maintenant, comme ci-dessous.

<script> 
    var myApp = angular.module("orderApp", []); 
    myApp.controller("ArchiveController", function ($scope, $http) { 
     $scope.fromdate = ""; 
     $scope.todate = ""; 

     $http({ 
      url: "@Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)", 
      method: "GET", 
      params: { fromDate: $scope.fromdate, toDate: $scope.todate} 
     }) 
     .then(function (response) { 
      $scope.orderArchive = response.data; 
      console.log(response.data); 
     }); 

    }); 
</script>