I'm fairly new to AngularJS, so forgive me if this is a simple question;
I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window.
After the user successfully logs in, I want the modal window to be closed by Angular;
The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object)
In particular, im looking to replace this code in the Angular controller:
//window.location.href = '/IDD';
with a command to close the modal window.
HTML Code:
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="">JDCSupport</a>
<div class="nav navbar-nav" style="flex-direction: row;">
<p class="text-center">{{usrName}}</p>
<div data-ng-show="btnLogin">
<button class="btn btn-success btn-sm pull-xs-right"
style="padding: 10px;" data-toggle="modal"
data-target="#loginModal">
Login
</button>
</div>
<div data-ng-show="btnLogout">
<button class="btn btn-warning btn-sm pull-xs-right"
style="padding: 10px; margin-right: 10px;"
type="button">
Logout
</button>
</div>
<div data-ng-show="btnMenu">
<button class="navbar-toggler pull-xs-right" style="padding: 10px;" id="navbarSideButton" type="button">☰</button>
</div>
</div>
<ul class="navbar-side" id="navbarSide">
<li class="navbar-side-item">
Home
</li>
<li class="navbar-side-item">
Staff Roster
</li>
<li class="navbar-side-item">
Photos
</li>
<li class="navbar-side-item">
Messages
</li>
</ul>
<div class="overlay"></div>
</nav>
<div id="loginModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="col-lg-8 col-sm-8 col-12 main-section">
<div class="modal-content">
<div class="col-lg-12 col-sm-12 col-12 user-img">
<img src="images/man.png" alt="">
</div>
<div class="col-lg-12 col-sm-12 col-12 user-name">
<h1>User Login</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="col-lg-12 col-sm-12 col-12 form-input">
<form ng-submit="loginForm()" name="loginform" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" data-ng-model="user.username" name="username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" data-ng-model="user.password" name="password" required>
</div>
<button type="submit" class="btn btn-success">Login</button>
<div class="alert alert-danger" data-ng-show="errorMsg">{{error}}</div>
</form>
</div>
<div class="col-lg-12 col-sm-12 col-12 link-part">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
And my Angular Controller:
app.controller ("logController", function ($scope, $http) {
$scope.btnLogin = true;
$scope.btnLogout = false;
$scope.btnMenu = false;
$scope.errorMsg = false;
$scope.loginForm = function() {
var ans="";
var encodedString = 'username=' +
encodeURIComponent(this.user.username) +
'&password=' +
encodeURIComponent(this.user.password);
$http({
method : 'POST',
url : 'php/login.php',
data : encodedString,
headers : {'Content-type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
console.log(response);
ans = response.data;
if (ans.message == 'correct' ) {
$scope.btnLogin = false;
$scope.btnLogout = true;
$scope.btnMenu = true;
//window.location.href = '/IDD';
} else {
$scope.errorMsg = true;
$scope.error = ans.error;
}
},
function (response) {
//error handling
});
};
});
use the following on login successful
$('#loginModal').modal('hide');
You can achieve that with $('loginModal').modal('hide'); or $('loginModal').modal('toggle');
Related
I have a problem with JS functions.
I wrote functions in other file named index.js but in index.hmtl when i use like "onclick = function()" the file doesn't recognize the function
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{asset('css/bootstrap/bootstrap.css')}}" rel="stylesheet">
<link href="{{asset('css/index.css')}}" rel="stylesheet">
<title>Sicurezza del Visitatore</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-body" id="cardTitle">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h6>Registrazione dati preliminare all'accesso agli Stabilimenti delle Società:</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h3>BROVEDANI GROUP SpA</h3>
<h3>BROVEDANI SpA</h3>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h6>Scheda Registrazione finalizzata alla Sicurezza del Visitatore</h6>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-body">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/open">Visite in corso</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/closed">Visite concluse</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-body" id="cardContent">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<h3>Inserimento nuova visita</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<form>
<br>
<div class="form-group row">
<label class="col-sm-4">Giorno: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="date" name="date" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" >Addetto:</label>
<select class="col-sm-8 form-control" required id="newAddetto_registrazione" name="newAddetto_registrazione">
#foreach($addetti_reg as $addetto_reg)
<option value="{{$addetto_reg->id}}">{{$addetto_reg->cognome}}</option>
#endforeach
</select>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Cognome:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newCognome" name="newCognome" required autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Nome:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newNome" name="newNome" required autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Società:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newSocieta" name="newSocieta" autocomplete="off">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">Accesso al Plant:</label>
<div class="col-sm-8">
#foreach($plants as $plant)
<input type="checkbox" value="{{$plant->nome}}" name="newPlants[]" id="newPlants[]">
<label>{{$plant->nome}} </label>
#endforeach
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label">N°Badge:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="newBadge" name="newBadge" required autocomplete="off">
<p id="errorBadge" style="color: red; font-style: italic; display: none">Badge in uso</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<!--HERE--> <button id="btnAggiungi" class="btn btn-dark" onsubmit="return checkBadge()">Aggiungi</button>
</div>
</div>
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('js/jquery/jquery-3.3.1.js')}}"></script>
<script src="{{asset('js/bootstrap/bootstrap.js')}}"></script>
<script src="{{asset('js/index.js')}}"></script>
</body>
JS
$().ready(function ()
{
/*
$("#newCognome").keyup(function ()
{
var cognome = $("#newCognome").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/cerca",
data:
{
cognome: cognome
},
success: function (data) {
if(data==null)
{
}
else
{
$("#newNome").val(data.msg.nome);
}
},
error: function () {
alert("chiamata fallita");
}
});
});*/
/*
$("#newBadge").keyup( function ()
{
var badge = $("#newBadge").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/badgevalido",
data:
{
badge: badge
},
success: function (data) {
if(data.msg === "true")
{}
else if(data.msg === "false")
{
alert("Badge in uso");
}
},
error: function () {
alert("chiamata fallita");
}
});
});*/
getDate();
function getDate()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var today = dd+'/'+mm+'/'+yyyy;
document.getElementById("date").value = today;
document.getElementById("day").value = today;
}
$("#btnAggiungi").click(function ()
{
checkBadge();
});
function checkBadge()
{
var badge = $("#newBadge").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax
({
type: "post",
url: "/badgevalido",
data:
{
badge: badge
},
success: function (data) {
if(data.msg === "true")
{}
else if(data.msg === "false")
{
$("#errorBadge").css("display","initial");
}
},
error: function () {
alert("chiamata fallita");
}
});
}
});
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
I want that the function checkBadge() in HTML referes to JS external file how i can do this?
A function declaration creates a variable in the current scope, which is the anonymous function you pass to ready().
That variable (holding the function) is not available outside said anonymous function.
You could move the function outside to make it a global and then access from your onclick attribute but:
Globals are awful
onclick attributes are awful
Bind the event handler with jQuery's on instead of using an onclick attribute.
I have a modal which has a form in it. I am trying to submit the form without refreshing the page using ajax and I am successfully submitting the form but I am unable to hide the modal.
Bootstrap Modal With Form in it:
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<form >
<div class="modal-body">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill"
href="#pills-home" role="tab" aria-controls="pills-home" aria-
selected="true">CreditCard/DebitCard</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill"
href="#pills-profile" role="tab" aria-controls="pills-profile"
aria-selected="false">Paypal</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill"
href="#pills-contact" role="tab" aria-controls="pills-contact"
aria-selected="false">Quickpay</a>
</li>
</ul>
<div class='pt-1 pb-1 pl-2 text-danger text-center' id="payment-
error">Please enter all card details!</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home"
role="tabpanel" aria-labelledby="pills-home-tab">
<div class="form-group">
<label for="amount">Amount</label>
<div class="input-group">
<input type="number" name="amount" id="modal_amount"
class="form-control" placeholder="Enter Donation amount"
autocomplete="amount" value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-money"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="name">CardHolder Name</label>
<div class="input-group">
<input type="text" name="name" class="form-control"
placeholder="Enter Name" autocomplete="name" id="modal_name"
value="">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-user"></i></span></div>
</div>
</div>
<div class="form-group">
<label for="cardnumber">Card Number</label>
<div class="input-group">
<input type="tel" name="cardnumber" class="form-control"
placeholder="Valid Card Number" autocomplete="cc-number"
value="" id="modal_number">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-credit-card"></i></span></div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="form-group">
<label for="expdate">Expiry Date</label>
<div class="input-group">
<input type="tel" name="expdate" class="form-control"
placeholder="MM/YY" autocomplete="exp-date" value=""
id="modal_expdate">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-calendar"></i></span></div>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="cvv">CVV</label>
<div class="input-group">
<input type="password" name="cvv" class="form-control"
placeholder="Enter CVV" autocomplete="cvv" maxlength="3"
value="" id="modal_cvv">
<div class="input-group-append"><span class="input-group-
text"><i class="fa fa-key" ></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-
labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-
labelledby="pills-contact-tab">...</div>
</div>
<input type="hidden" name="fundid" id="fundid">
</div>
<div class="modal-footer">
<button type="submit" class="form-control btn btn-primary btn-small"
name="fundraiser" id="fundraiser">Submit</button>
</div>
</form>
</div>
</div>
</div>
Ajax Code for above Modal:
$('document').ready(function(){
$('#event-error').hide();
$('.event-alert').hide();
$('#payment-error').hide();
$('.payment-alert').hide();
// fundraiser modal form submission
$('#fundraiser').click(function(){
var cardname = $('#modal_name').val();
var cardnumber = $('#modal_number').val();
var amount = $('#modal_amount').val();
var expdate = $('#modal_expdate').val();
var cvv = $('#modal_cvv').val();
var fundid = $('#fundid').val();
var payment_data = 'card-name=' + cardname + '&card-number=' + cardnumber
+ '&amount=' + amount + '&expdate=' + expdate + "&cvv=" + cvv +
'&fundid=' + fundid;
if( cardname == "" || cardnumber == "" || amount == "" || expdate == ""
|| amount == "")
{
$('#payment-error').show();
return false;
}
else{
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
}
});
$('#modal_name').val("");
$('#modal_number').val("");
$('#modal_amount').val("");
$('#modal_expdate').val("");
$('#modal_cvv').val("");
return false;
}
});
After Modal pops up, I provide a random card details in the form for the payment and after I submit the form, the details are posted into db using ajax post call and a alert is shown payment successful. However i am unable to close the modal. Please do solve this??
You must call the hide() function in order to close your modal.
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('#exampleModalCenter').modal('hide'); // here you hide the modal
}
});
Simply setting .val(""); won't hide it.
You close a Bootstap modal with
$(selector).modal('hide');
To hide all modals
$('.modal').modal('hide');
So, if you are wanting to close the modal only on success of the AJAX call, then you would do this:
$.ajax({
type: "POST",
url: "fund_data.php",
data: payment_data,
success: function(){
$('.payment-alert').delay(1000).show();
$('.modal').modal('hide');
}
});
I want to save what the user types in the input as a variable when the user clicks the button. Than, I want to console.log the new variable with the users information. What am I doing wrong?
<html>
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>
<script>
function saveUserData()
{
// store the tag with id="sign" in var userdata
var userdata = document.getElementById("userdata");
}
// confirm the element exists and what value the user submits
console.log(userdata);
console.log("users value is: " + userdata.value);
</script>
</html>
function saveUserData() {
var name = document.getElementById('userdata').value;
console.log("users value is: " + name);
}
<div class="container bg-light">
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-6">
<div class="form-group text-center">
<h1>Saving User Data as a Variable with Javascript</h1>
<div class="form-group">
<input id="userdata" class="form-control">
</div>
<div class="form-group mx-auto text-center">
<button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
</div>
</div>
</div>
<div class="col-md-3 bg-danger">
</div>
</div>
</div>
try this
function saveUserData() {
var userdata = document.getElementById('userdata').value;
console.log("users value is: " + userdata);
}
I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks
Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem
ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}
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.
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>