Recently my page was showing data but from yesterday suddenly its now showing. I am confused what I have done wrong. I checked properly and everything is working fine.
Here is code on UI-
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="EmployeeServices.js"></script>
</head>
<body>
<form id="form1" ng-controller="EmpCtrl" ng-submit="save()">
<table border="1" style="text-align: center; margin-left: 410px;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Gender</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.Name}}</td>
<td ng-bind="employee.Age"></td>
<td ng-bind="employee.City"></td>
<td>{{employee.Gender && "Male" || "Female"}}</td>
<td>Edit </td>
<td>Delete </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Code of Controller-
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
I also checked and realized that controller is receiving the data in object form but its not displaying on UI
I think you missed the "/" at the beginning of 'get' URL.
var app = angular.module('myApp', ['ngRoute']);
app.controller('EmpCtrl', function ($scope, $http, fetchEmpService) {
$http.get("/EmpWebService.asmx/GetEmp")
.then(function (response) {
$scope.employees = response.data;
});
}
Please verify.
Related
Trying to inject view using route in AngularJS.When I click on the link it doesn't show the view in page.There is index.html file in which I am trying to inject view.
This is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular Routing</title>
<!--<script src="Scripts/angular.min.js"></script>-->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<link href="CustomStyle.css" rel="stylesheet" />
<script src="Scripts/script.js"></script>
</head>
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Courses
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
This is module named script.js
var app = angular.module("Demo", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller:"homeController"
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller:"coursesController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#","HTML","JAVA","Angular JS"];
})
When I click on one of the link say home, it displays this in browser address bar http://localhost:51008/index.html#!#%2Fhome instead of this http://localhost:51008/index.html/#home
And there is no error displayed in consoleThis is my Directory Structure
Here I want to show Name, Country values through $http, The data is showing in the table this is fine, but when I check any check box in that table I want to display Name, Country values of that selected checkbox. How can I do that?
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(indexVal, values) {
var getDataValue = {};
if (values) {
alert($scope.myData.records.Name[indexVal]);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails($index, chkVal)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
i want to show Name and Contry for selected Checkbox only
</div>
</div>
Check this out, it works:
(Code explained below).
var app = angular.module("myApp", []);
app.controller("homeCtrl", function($scope, $http) {
$scope.getDataValue = [];
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response) {
$scope.myData = response.data.records;
});
$scope.showDetails = function(data) {
if ($.inArray(data, $scope.getDataValue) === -1) {
$scope.getDataValue.push(data);
} else {
var index = $scope.getDataValue.indexOf(data)
$scope.getDataValue.splice(index, 1);
}
console.log($scope.getDataValue);
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div style="width:100%;" ng-app="myApp" ng-controller="homeCtrl">
<div style="width:50%; float:left;">
<table style="width:100%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Name</th>
<th class="text-center">Country</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in myData">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.Name}}</td>
<td class="text-center">{{x.Country}}</td>
<td class="text-center"><input type="checkbox" ng-checked="chkVal1" ng-model="chkVal" ng-change="showDetails(x)" /></td>
</tr>
</table>
</div>
<div style="width:50%; float:left; padding-left:1%;">
<b>Selected Name and Country</b>
<div ng-repeat="x in getDataValue">
{{x.Name}} - {{x.Country}}
</div>
</div>
Explanation
Function showDetails(x) gets triggered on check/uncheck of the check box.
Parameter x is an object in the array you pressed at that instance.
Then, it checks whether the object (i.e, data) is present in the array (i.e, $scope.getDataValue) or not. if ($.inArray(data, $scope.getDataValue) === -1)
If it is absent, it just pushes the object in the array and shows the array.
Else, it deletes the object which is unchecked and shows the remaining array.
I am getting the data from database via http post call and rendering the table. Well the implementation code looks fine however, the pagination doesn't seem to work.
I implemented it according to my requirement and I get the response which I can see in chrome console. What could be wrong with the pagination as I am not able to see any pagination buttons.
Here's the code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
//Get table from Server and do pagination
app.controller("tableController", function ($scope, $http) {
$scope.filteredTodos = []
, $scope.currentPage = 1
, $scope.numPerPage = 10
, $scope.maxSize = 5;
$scope.getTable = function () {
$scope.customerTable = [];
$http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
{
$scope.customerTable = data;
});
};
$scope.getTable();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.customerTable.slice(begin, end);
});
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in customerTable| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
</form>
</div>
</div>
</body>
</html>
Here's the plunker: http://plnkr.co/edit/eNgT4bVroGIla4EOdkNZ?p=preview
Module:
var app = angular.module('myApp', ['ui.bootstrap']);
Try this,
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
You should be iterating filteredTodos instead of customerTable
I am following the example of Template-expanding directive
It is working fine. Now I am trying to extend the concept as follows.
app.js
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
var EmpData = [{
"EmpId": 1,
"EmpName": "Michale Sharma"
}, {
"EmpId": 2,
"EmpName": "Sunil Das"
}
];
var DeptData= [{
"Deptid": 4,
"Deptname": "IT"
}, {
"Deptid": 1,
"Deptname": "HR"
}];
$scope.customer = {
EmployeeRelatedData: EmpData,
DepartmentRelatedData: DeptData
};
});
app.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
return attr.type+'.html';
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js#1.3.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<div ng-controller="Ctrl">
<!-- Section for Employee -->
<div my-customer type="EmployeeRelatedData">
<table border="1">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in customer.EmployeeRelatedData"></tr>
</tbody>
</table>
</div>
<!-- Section for Department -->
<div my-customer type="DepartmentRelatedData">
<table border="1">
<thead>
<tr>
<th>Department Id</th>
<th>Department Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in customer.DepartmentRelatedData"></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
EmployeeRelatedData.html
<tr>
<td>{{customer.EmpId}}</td>
<td>{{customer.EmpName}}</td>
</tr>
DepartmentRelatedData.html
<tr>
<td>{{customer.Deptid}}</td>
<td>{{customer.Deptname}}</td>
</tr>
I am looking for the output
What is the mistake that I am making for which I am not able to get it?
Thanks.
You've got few mistakes please see here for working demo
http://plnkr.co/edit/RQ1xWaLUAsBpNgyMWujI?p=preview
my-customer should be inside tr tag not before table
you need to pass your customer to directive scope so in you can do that by crating isolate scope
scope: {
customer: '=myCustomer'
},
and in your view
my-customer="x"
as x is your customer
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);