I would like to expand on a WC3 angular tutorial that goes to the database and gets format a resultset to display into a table on the screen. The tutorial is here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_sql
What I want to add is an input box that allows me to enter starting letters to be used in the sql lookup query in the asp page. So I will pass what's in the textbox to the sql to then refresh the table results with only the words beginning with those characters entered:
Here is my code and I can't figure out how to wire up the input field to refresh the table. $Scope.myWord doesn't work. Can anyone help?
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" style="margin: 20px;">
<h4>Add Hangman Word</h4>
<form method='post' action='modify.asp' name='theForm' id='theForm' onsubmit="return vForm();">
<div ng-controller="wordsCtrl">
<input type='hidden' name='addhangmanword' value='1' />
<b>Add word:</b><br />
<input class="form-control" style='width:250px;' ng-model="myWord" name="word" id="word" type="text" /><br />
<input class="btn" style="border: 1px solid black; display: inline;" type='submit' value='Submit' />
<br /><br />
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
var strBegin = $scope.myWord;
if (strBegin != "") {
ajaxURL = ajaxURL + "?w=" + strBegin;
}
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
</body>
</html>
Update portion of the code that fixed the issue:
<table class="table table-bordered table-striped" style="width: 80%;">
<thead>
<tr>
<th style="text-align: left;">Word</th>
<th style="text-align: left;">Hint</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names | filter: myWord">
<td>{{ x.Word }}</td>
<td>{{ x.Hint }}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('myApp', []);
app.controller('wordsCtrl', function ($scope, $http) {
var ajaxURL = "ajax/hangman_word_list.asp";
$http.get(ajaxURL)
.then(function (response) { $scope.names = response.data.records; });
});
</script>
Related
I am newbie in Angular. I am trying to print the gross total of the products in the bill. While calculating the product total, the value of qty is given by the user. The code for calculating product total is working fine but when I am calculating the gross total, it takes the default value as 1 only and not the value given by the user.
The server is responding with the product details like code, name, price, and gst.The quantity is entered by user.
I searched, but everywhere the quantity was coming from server's response.
Here is my code for billPage:
<body>
<div class="container" ng-controller="billCtrl">
<h1>Billing Section</h1>
<input class="form-control" ng-model="search"><br>
<button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
<table class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th>GST(%)</th>
<th>Quantity</th>
<th>Product Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in billing" ng-init="model = [{qty:1}]">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.gst}}</td>
<td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"></td>
<td>{{(product.price+(product.gst*product.price/100)) * model[$index].qty }}</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">Gross Total</td>
<td>{{total()}}</td>
</tr>
</tbody>
</table>
</div>
Code for BillCtrl.js
var myApp = angular.module('myApp', ["ngRoute"]);
myApp.controller('billCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from bill");
$scope.billing = [];
$scope.searchProduct = function(id) {
console.log("search");
$http.get('/billing/' + id).success(function(response) {
$scope.billing.push(response[0]);
});
}
$scope.total = function() {
console.log($scope.model[0].qty);
var total = 0;
angular.forEach($scope.billing, function(product) {
total += (product.price + (product.price * product.gst / 100)) * $scope.model.qty;
})
console.log(total);
return total;
}
}])
You can have the total logic in UI and addup the total in controller
Here is the working example
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('billCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from bill");
$scope.model = undefined;
$scope.billing = [];
$scope.searchProduct = function(id) {
console.log("search");
/*$http.get('/billing/' + id).success(function(response) {
$scope.billing.push(response[0]);
});*/
$scope.billing = [{"code":"a1","name":"a1","price":100,"gst":0.1},{"code":"a2","name":"a2","price":200,"gst":0.2},{"code":"a3","name":"a3","price":300,"gst":0.3},{"code":"a4","name":"a4","price":400,"gst":0.4}];
}
$scope.total = function() {
//console.log($scope.model[0].qty);
var total = 0;
angular.forEach($scope.billing, function(product, index) {
total += product.total;
})
console.log(total);
return total;
}
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div class="container" ng-controller="billCtrl">
<h1>Billing Section</h1>
<input class="form-control" ng-model="search"><br>
<button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
<table class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Product Price</th>
<th>GST(%)</th>
<th>Quantity</th>
<th>Product Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in billing" ng-init="model = [{qty:1}];">
<td>{{product.code}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.gst}}</td>
<td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"
ng-change="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"
ng-init="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"></td>
<td>{{product.total}}</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">Gross Total</td>
<td>{{total()}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<th></th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in names">
<td>{{$index+1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Hai Guys,
I am using ng-repeat to display the table records and $index+1 to display the serial number.
I want to display the Header Name and Country to repeat for every 2 records(if $index %2 == 0).
How will i do it?
Any idea please.
Well i found my own answer.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat-start="x in names">
</div>
<div ng-if="$index % 2==0">
<table ng-repeat="x in names | limitTo:1">
<tr>
<th>S No</th>
<th>Name</th>
<th>Country</th>
</tr>
</table>
</div>
<table ng-repeat-end="x in names">
<tr>
<td>{{$index + 1}}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
I am using smart table but I am not able to sort the table, the following is my code
<div ng-app="app">
<div ng-controller="app-controller">
<table st-table="EmployeeDetails" class="table table-striped table-hover" st-safe-src="EmployeeData">
<thead>
<tr>
<th st-sort="EmployeeName">Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in EmployeeData">
<td class="col-xs-2">
<small>{{employee.EmployeeName}}</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('app-controller', ['$scope','$http', function ($scope,$http) {
$http.get('/Data/EmployeeDetails.json').success(function (data) {
$scope.EmployeeData = data;
}).error(function () {
alert('error');
});
}]);
</script>
can anyone let me know what exactly is wrong, i have referenced both angular.js and smart-table.js
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/smart-table.js"></script>
You should use 'EmployeeDetails' at ng-repeat
JSFiddle
OK
<tr ng-repeat="employee in EmployeeDetails">
NG
<tr ng-repeat="employee in EmployeeData">
Thanks
Forgive me because I'm relatively new to AngularJS. I have a situation where I am calling to a WebApi webservice. I have two pages, one that binds and one that doesn't, with the same code in both. I can see that the webservice is being hit and IS returning data. Any idea what the problem could be??
This is the data that is being returned by the webservice:
[{"id":1,"name":"Chester" , "gender":"Male" , "salary":25000},
{"id":2,"name":"Mary" , "gender":"Female" , "salary":15000},
{"id":3,"name":"Tim " , "gender":"Male" , "salary":22000},
{"id":8,"name":"Wayne", "gender":"Male" , "salary":81231}]
The code that works is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="MyModule">
<div ng-controller="MyController" ng-init="initController">
{{MadeItHereMessage}}
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The code that doesn't work is here:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="EmployeeApplication">
<div ng-controller="EmployeeController" ng-init="AngularInit()">
{{Message}}
<br/>
{{DisplayAction}}
<br />
<!--The following is for listing the entire list of employees-->
<div id="listSection" ng-show="DisplayAction=='List'">
<!--The employees data is: {{employees}}-->
<!--<div id="listSection">-->
<table>
<thead>List of defined Employees</thead>
<tr>
<!--<td><button id="btnCreateNew" type="button" value="Create Employee" ng-click="CreateNewEmployee()"></button></td>-->
</tr>
<tr>
<td ng-show="gotdata">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
<!--<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="for employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button type="button" value="Details" ng-click="ShowDetails({{employee.id}})"></button></td>
<td><button type="button" value="Delete" ng-click="DeleteEmployee({{employee.id}})"></button></td>
<td><button type="button" value="Edit" ng-click="EditEmployee({{employee.id}})"></button></td>
</tr>
</tbody>
</table>-->
</td>
</tr>
</table>
</div>
<!--The following is for listing the details of a single employee-->
<!--<div id="DetailsSection" ng-show="DisplayAction=='Details'">
<table>
<tr>
<td>ID:</td>
<td> <input id="DetailsID" value={{id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDelete" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
<td>
<button id="NavToEdit" type="button" value="Edit" ng-click="EditEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for editing a employee-->
<!--<div id="EditSection" ng-show="DisplayAction=='Edit'">
<table>
<tr>
<td>ID:</td>
<td>
<input id="ID" value={{id}} />
</td>
</tr>
<tr>
<td>Name:</td>
<td><input id="" value={{name}} ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value={{gender}} ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value={{salary}} ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="EditUpdate" type="button" value="Update" ng-click="EditUpdate()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDeleteEdit" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for verification of deletion-->
<!--<div id="DeletionSection" ng-show="DisplayAction=='Delete'">
<table>
<tr>
<td>Do you really want to delete {{name}}</td>
<td></td>
<td>
<button id="btnCancelDelete" type="button" value="No"></button>
</td>
<td>
<button id="btnDeleteEmployee" type="button" value="Yes" ng-click="DoDeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for creation of a employee-->
<!--<div id="CreationSection" ng-show="DisplayAction=='Create'">
<table>
<tr>
<td>Name:</td>
<td><input id="" value="" ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value="" ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value="" ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="btnCreateEmployee" type="button" value="Delete" ng-click="CreateEmployee()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
</tr>
</table>
</div>-->
</div>
</body>
</html>
I am getting the heading, but no actual data from the web service.
The angularjs javascript file is here:
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http) {
AngularInit();
function AngularInit()
{
//This will be called once per form load, via the ng-load function on the div
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = '';
$scope.gotdata = false;
DisplayList();
}
function GetAllEmployees($http) {
//$scope.Message = 'NULL';
//$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = 'OK';
$scope.go = true;
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
$scope.gotdata = false;
}
);
window.setTimeout(function () {
$scope.gotdata = true;
}, 1000);
};
function DisplayList() {
//call the web service to get the list of people
//set the display action so that the list will be displayed
GetAllEmployees($http)
$scope.DisplayAction = 'List';
};
function CreateNewEmployee() {
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Create';
};
function ShowDetails(id) {
//call the web service to get the details of the person
//Set the $scope.CurrentEmployee
$scope.DisplayAction = 'Details';
};
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http)
{
$scope.MadeItHereMessage = 'We made it to the controller (first controller)';
$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = "OK";
},
function (err)
{
$scope.Message = "Call failed" + err.status + " " + err.statusText;
}
);
});
Replace the call to window.setTimeout with the $timeout service.
//window.setTimeout(function () {
//Use $timeout service
$timeout(function() {
$scope.gotdata = true;
}, 1000);
The $timeout service is properly integrated with the AngularJS digest cycle. Changes to $scope made with setTimeout are not immediately seen by the AngularJS framework.
For more information, see AngularJS $timeout Service API Reference
Your template is loaded before you get the http data. So a solution is to display the template when the ressource is loaded with ng-if.
Can you try:
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
First you don't need to pass the $http into your "GetAllEmployees"-Function because it's already there!
Second, I would suggest to use the "$q" to save the response into a variable. Check this out
I want to use filter function and input search at the same time by using AngularJS. I can able to do with multiple functions. But I'm getting some errors while I add an textbox for search. Is there any way to do this? I tried some ways but no one did not work.
Thanks in advance.
Example code is below
var app = angular.module("app", []),
url = "http://www.filltext.com/?rows=50&pretty=true&fName={firstName}&age=[18,19,20,21]";
app.controller("controller", function($scope, $http) {
$http.get(url)
.success(function(resp) {
$scope.list = resp;
});
$scope.filterAge = function(item) {
return item.age > 19;
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Filter</title>
</head>
<body ng-controller="controller">
<div class="container">
<br>
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: filterAge">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should add custom filter to angular module instead adding filter function to your controller. This is the example:
CustomFilter:
.filter('filterByAge', function filterByAge() {
return function(array, age) {
var filteredArray = [];
angular.forEach(array, function(item) {
if (item.age > age) {
filteredArray.push(item);
}
});
return filteredArray;
}
});
HTML
<input type="text" ng-model="search" placeholder="Search..." />
<table class="table table-striped">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="item in list | filter: search | filterByAge:19">
<td>{{ item.fName }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
$scope.$watch('search', function (data) {
//sorting logic
})
Watcher is waiting for any action taken on search filed then the function is executed.