I am trying to create a single page application using angularjs, MVC and web-API. I am using "ng-repeat" to display all the records in a table, but it is generating blank rows. No of blank rows are equal to the no of records in the database. API is working fine. Also when I print the $scope.Students variable I can see the data in console.
Index page
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/MyScripts/script.js"></script>
<h2>Home Page</h2>
<body ng-app="appModule">
<div>
<br />
Read
Create
Delete
<br />
<ng-view></ng-view>
<br />
</div>
</body>
html for display
<br />
{{message}}
<br /><br />
<table border="1">
<thead>
<tr>
<td>
ID
</td>
<td>
Name
</td>
<td>
City
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="Student in Students">
<td>
{{ Student.StudentID }}
</td>
<td>
{{ Student.Name }}
</td>
<td>
{{ Student.City }}
</td>
<td>
<input type="button" value="Edit" ng-click="" />
</td>
<td>
<input type="button" value="Delete" ng-click="" />
</td>
</tr>
</tbody>
</table>
<br /><br />
{{ errorMessage }}
Angular controller
.controller("DisplayController", function ($scope, appService) {
$scope.message = "Display Page";
getAll();
//method to call angular service
function getAll() {
//service call
var serviceCall = appService.getStudents();
serviceCall.then(function (response) {
//store response data to scope variable
$scope.Students = response.data;
console.log($scope.Students)
},
function (error) {
$scope.errorMessage = error;
})
}
})
View Page
It's case sensitive ,according to your data , it should be,
<td>
{{ Student.studentID }}
</td>
<td>
{{ Student.name }}
</td>
<td>
{{ Student.city }}
</td>
Related
I would like to Add and Edit and Delete table list data.
With my knowledge I was able to write the below code for adding a new user and I don't know how to perform the edit and delete operation.
I searched lot in google but did not get proper solution.
Can some one help me please?
index.html:-
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="w3-container">
<h3>Users</h3>
<table class="w3-table w3-bordered w3-striped">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
<td>
<button class="w3-btn w3-ripple" ng-click="editUser()">Edit</button>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="deleteUser()">Delete</button>
</td>
</tr>
</table>
<br></br>
<h3>Create New User</h3>
<form>
<label>First Name:</label>
<input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name">
<br>
<label>Last Name:</label>
<input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name">
<br></br>
<button class="w3-btn w3-green w3-ripple" ng-click="addUser()">Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
myUsers:-
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.addUser=function(){
$scope.users.push({
'fName':users.fName,
'lName':users.lName,
});
}
$scope.editUser=function(){
}
$scope.deleteUser=function(){
}
});
Please check the tutorial from here.
For your reference use following code and check the codepen to here.
In template
<tr ng-repeat="user in users">
<td>
<span ng-if="!user.editFlag">{{ user.fName }}</span>
<input ng-if="user.editFlag" ng-model="user.fName"/>
</td>
<td>
<span ng-if="!user.editFlag">{{ user.fName }}</span>
<input ng-if="user.editFlag" ng-model="user.lName"/>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="editUser($index)"><span ng-if="!user.editFlag">Edit<span><span ng-if="!user.editFlag">Save</span></button>
</td>
<td>
<button class="w3-btn w3-ripple" ng-click="deleteUser($index)">Delete</button>
</td>
</tr>
In your controller
// edit data
$scope.editUser = function (index) {
if($scope.users.length){
// its checking with your edit flag to save or edit
$scope.users[index].editFlag = !$scope.users[index].editFlag;
}
};
// Delete data
$scope.deleteUser = function (index) {
// Remove from main records (using index)
if($scope.users.length){
$scope.users.splice(index, 1);
}
};
Please check this sample to here.
Hopes this will help you !!
These changes will make addUser functionality work
$scope.addUser=function(index){
if(index){
$scope.users[index].fName=$scope.fName;
$scope.users[index].lName=$scope.lName;
}
else{
$scope.users.push({
'fName':$scope.fName,
'lName':$scope.lName,
});
}
$scope.editMode=false;
$scope.fName='';
$scope.lName='';
}
$scope.editUser=function(index){
$scope.editMode=true;
$scope.editIndex=index;
$scope.fName=$scope.users[index].fName;
$scope.lName=$scope.users[index].lName;
}
$scope.deleteUser=function(index){
$scope.users.splice(index,1)
}
Here is working version of above problem
with changes in html and js code
https://embed.plnkr.co/ecKSDwW2hfU9t7cj4rZP/
Newb to AnjularJS, searches turned up a lot of similar questions, but nothing seems to fit. This prototype is pretty simple, ng-repeat on a table row, but the ng-repeat is showing 5 blank table rows, I'm expecting just one. My sample json checks out on JSONlint, and I can console.log it just fine.
I've got a simple html template, js, and php app I'm prototyping. code and screen grabs below.
SCREEN GRAB:
angular.module('showcontent', [])
.controller('showcontentController', ['$scope', '$http', function ($scope, $http)
{
$http.get('controller.php')
.then (function(data)
{
$scope.showcontents = data;
console.log("\nhttp get returned data :: \n"+JSON.stringify(data));
console.log("\n\n"+$scope.showcontents.data[0].ticket+"\n");
});
}]);
<body ng-app="showcontent">
<div class="container-fluid">
<div class="row">
<div ng-controller="showcontentController">
<table>
<thead>
<tr>
<th>TICKET</th>
<th>SHOW</th>
<th>SEASON</th>
<th>EPISODE</th>
<th>PROVIDER</th>
<th>MISSINGFROM</th>
<th>FIXAGENTTICKET</th>
<th>ACTUAL_START</th>
<th>ACTUAL_END</th>
<th>STATUS</th>
<th>ELEMENT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="showcontent in showcontents">
<td {{ showcontent.ticket }} </td>
<td {{ showcontent.show }} </td>
<td {{ showcontent.season }} </td>
<td {{ showcontent.episode }} </td>
<td {{ showcontent.provider }} </td>
<td {{ showcontent.missingfrom }} </td>
<td {{ showcontent.fixagentticket }} </td>
<td {{ showcontent.actual_start }} </td>
<td {{ showcontent.actual_end }} </td>
<td {{ showcontent.status }} </td>
<td {{ showcontent.element }} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
PHP CODE(controller.php)
<?php
header('Content-Type: application/json');
$vodContent='[{"ticket": "SI999999999","show": "The New Big Show","season": "1","episode": "1","provider": "cable","missingfrom": "AllX1","fixagentticket": "INC999999999","actual_start": "01-NOV-17","actual_end": "","status": "Working","element": "The Big New Show 1000HD"}]';
echo $vodContent;
?>
It looks like your HTML is not properly formatted. Try closing your td tags:
<td> {{ showcontent.ticket }} </td>
instead of
<td {{ showcontent.ticket }} </td>
Also, you may need to access the data property of your response object:
$scope.showcontents = data.data;
When I add any data I am getting values in text box instead of getting it in span.And also after the data gets added I am getting done button instead of getting Update button.Find my full code here:https://jsfiddle.net/GowthamG/jL5oza04/
Is there any error?
<script type="text/javascript">
var app=angular.module("mainapp",[]);
app.controller('mycontrol',function($scope){
$scope.filters=[];
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.filter={};
};
$scope.update = function (index) {
$scope.editing = $scope.filters.indexOf(index);
};
<table border="2">
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Fees</td>
<td>E-Course</td>
</tr>
<tr ng-repeat="filter in filters track by $index">
<td><span ng-hide="update">{{filter.fname}}</span>
<input type="text" ng-show="update" ng-model="filter.fname">
</td>
<td><span ng-hide="update">{{filter.lname}}</span>
<input type="text" ng-show="update" ng-model="filter.lname">
</td>
<td><span ng-hide="update">{{filter.ffees}}</span>
<input type="number" ng-show="update" ng-model="filter.ffees">
</td>
<td><span ng-hide="update">{{filter.eroll}}</span>
<input type="text" ng-show="update" ng-model="filter.eroll">
</td>
<td>
<button ng-hide="update" ng-click="update = true; update($index)">Update</button>
<button ng-show="update" ng-click="update = false">Done</button>
</td>
<td>
<button ng-click="remove($index)">Remove</button>
</td>
</tr>
</table>
You have to initialize the value of $scope.update in your add functionality to hide the inputs. Now the values will be shown in a span with update button.
$scope.add=function(filter){
$scope.filters.push(filter);
$scope.update=false;
};
Working Demo: https://jsfiddle.net/kz8uLg10/2/
i am trying to display data in a table using angularJS ng-repeat. Data is not displayed. Here is my code : https://jsfiddle.net/807mxydL/. Thanks for your help
var custApp = angular.module('custApp', []);
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs =
[{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
};
};
HTML code:
<div ng-app="custApp">
<div ng-controller="CustomerControlleras customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>
Try like this
you have some mistakes.
1: <div ng-controller="CustomerController as customer">
2:forgot put ) in end of controller
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs = [{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="custApp">
<div ng-controller="CustomerController as customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>
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