Angular如何从ng-model获取值并将其传递给params

Question

I'm new to angular

help me to get value from ng-model and pass them into $http params to get json response ,

and then i don't know how to show results using my own template as ng-repeat

    <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>

Here is my HTML code

<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>

Please help me to find the solution.

Answer 1

It looks like you aren't declaring the variables $scope.formdate and $scope.todate inside of your controller. Try the code below, the first thing it does is declares the variables. Then to add them to the params you just need to put those variables in place of the constants you have now, like below.

<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>