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
Related
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>
How do you get the ng-click event to actually fire? I've tried everything to get this to work. I know the alert is working initially, but after the list is displayed, quite magically all the buttons fail to function.
Here is the display of the page (pre/post alert). I've verified that each button for details is getting a unique id. As you can see, I've also tried $parent (since some of the buttons are within a ng-repeat) as well as $rootscope to try to get things to execute (i.e. the detail buttons). It's almost as if, after the initially display, the page has lost the reference to the angularjs file since nothing functions:
When page is first displayed
After getting the data
Here's the AngularJS file:
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http,$window) {
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 = 'Unknown';
$scope.gotdata = false;
DisplayList();
ShowAlert('test')
}
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.gotdata = 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';
$scope.$apply();
};
function ShowDetails(id) {
//call the web service to get the details of the person
ShowAlert('test')
$scope.gotdata = false;
$http.get('http://localhost:65315/api/employee/' + id).then(function (response) {
$scope.employees = response.data;
$scope.DisplayAction = 'Details';
$scope.Message = 'OK';
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
}
);
//Set the $scope.CurrentEmployee
$scope.$apply();
};
function ShowAlert(msg)
{
$window.alert(msg);
}
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
$scope.$apply();
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
$scope.$apply();
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
//angular.module('EmployeeApplication', [])
// .controller('EmployeeController', ['$scope', '$window', function ($scope, $window) {
// $scope.greeting = 'Hello, World!';
// $scope.doGreeting = function (greeting) {
// $window.alert(greeting);
// };
// }]);
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;
}
);
});
//var app = angular.module("MyModule", []).controller("MyController", function initController($scope)
//{
// $scope.MadeItHereMessage = 'This is a loadtest';
//});
//var app = angular.module("EmployeeApplication", ['$rootscope','$scope','$http'])
//.controller("EmployeeController",
// function AppCtrl($rootscope,$scope, $http)
// {
// $scope.DisplayAction = "List";
// }
//);
//var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http) {
// $http.get('EmployeeWebService.asmx/GetAllEmployees').then(function (response) {
// $scope.employees = response.data;
// }
// );
//});
Here is the HTML file:
<!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}}
<button id="btnCreateNew1" ng-click="$parent.ShowAlert('Parent scope button pressed')">Show message from parent scope</button>
<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" ng-click="CreateNewEmployee()">Create Employee</button></td>-->
<td><button id="btnCreateNew" ng-click="$rootscope.ShowAlert('Create button pressed')">Create Employee</button></td>
</tr>
<tr>
<td ng-show="gotdata">
<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button id="btnDetailsA{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details</button></td>
<td><button id="btnDetailsB{{employee.id}}" ng-click="$parent.ShowDetails({{employee.id}})">Details B</button></td>
<td><button id="btnDetailsC{{employee.id}}" ng-click="ShowDetails({{employee.id}})">Details C</button></td>
<td><button id="btnDetailsD{{employee.id}}" ng-click="$scope.ShowDetails({{employee.id}})">Details D</button></td>
<td><button id="btnDetailsE{{employee.id}}" ng-click="$rootscope.ShowDetails({{employee.id}})">Details E</button></td>
<td><button id="btnDelete{{employee.id}}" ng-click="$parent.DeleteEmployee({{employee.id}})">Delete</button></td>
<td><button id="btnEdit{{employee.id}}" ng-click="$parent.EditEmployee({{employee.id}})">Edit</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={{employee.id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{employee.name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{employee.gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{employee.salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" ng-click="DisplayList()">Back to List</button>
</td>
<td>
<button id="NavToDelete" ng-click="DeleteEmployee({{id}})">Delete</button>
</td>
<td>
<button id="NavToEdit" ng-click="EditEmployee({{id}})">Edit</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" ng-click="DisplayList()"></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>
unlike vanilla event handlers, ng-click will look for a event handler in the controller scope, so when you have:
<button id="NavTolist" ng-click="DisplayList()">Back to List</button>
your controller must have:
$scope.DisplayList = function() {
//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';
};
you might be interested in take a look in a few sample projects over the web in order to better organize your code.
on a side note, whenever possible sample your web-capable code on plunker / jsfiddle / codepen, since it provides a huge help for anyone willing to help.
I have the following angular table with an edit button
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Budget Name</th>
<th>Year</th>
<th>Month</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="(ind,O) in budgetdetails">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
<td class="CX"><span>+</span></td>
<td>{{O.budget.BudgetName}}</td>
<td>{{O.budget.Year}}</td>
<td>{{O.budget.Month}}</td>
<td><input type="button" value="Remove" class="btn btn-primary" data-ng-click='removeRow(O)' />
<input type="button" value="Edit" class="btn btn-primary" data-ng-click='EditRow(O)' /></td>
</tr>
<tr class="sub">
<td></td>
<td colspan="5">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Category</th>
<th>SubCategory</th>
<th>Amount</th>
</tr>
<tr ng-repeat="(indx,a) in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
<td>{{a.Category}}</td>
<td>{{a.Subcategory}}</td>
<td>{{a.Amount| currency}}</td>
</tr>
#* <tr>
<td colspan="2">Total</td>
<td></td>
<td>{{Totals().Amount| currency}}</td>
</tr>*#
</table>
</td>
</tr>
</tbody>
</table>
I want to be able to edit the data when I click on the edit button so far I have been playing with the angular controller and I have this
$scope.EditRow = function (item) {
$scope.budget = item.budget;
$scope.idBudget = item.budget.idBudget;
$scope.BudgetName = item.budget.BudgetName;
$scope.Year = item.budget.Year;
$scope.Month = item.budget.Month;
resp=BDetail.FindBudgetById(item.budget.idBudget);
};
The last line call a json and returns a set of data which I want to send to the page were I create the budgets for editing. Now I am not sure how to send the json to another page and the page that receives it is the View were I create the budgets and it has an IEnumerable editor to repeat the budgets details. Code is as follows
#model BudgetPortalMVC4.Models.budget
#{
ViewBag.Title = "NewBudget";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/jquery")
<script src="../../Scripts/jquery.validate.js" type="text/javascript"> </script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>NewBudget</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div>
<table>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.BudgetName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BudgetName)
#Html.ValidationMessageFor(model => model.BudgetName)
</div>
</td>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.Year)
</div>
<div>
#Html.DropDownListFor(model => model.Year, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForYears())
#Html.ValidationMessageFor(model => model.Year)
</div>
</td>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.Month)
</div>
<div>
#Html.DropDownListFor(model => model.Month, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForMonth())
#Html.ValidationMessageFor(model => model.Month)
</div>
</td>
</tr>
</table>
</div>
<div>
<h3>Budget Detail</h3>
<div> <input type="button" id="addbudgetdetail" value="Add row" /></div>
<div id="new-budgetdetail">
#Html.EditorForMany(x => x.budgetdetails)
</div>
<input type="submit" />
</div>
#section Scripts{
<script type="text/jscript">
var url = '#Url.Action("GetSubCategories", "Budget")'; // Do not hard code your url's
$(document).on('change', '.SelectedCategory', function () {
var subCategory = $(this).closest('.item').find('.SelectedSubCategory');
subCategory.empty();
$.getJSON(url, { id: $(this).val() }, function (data) {
if (!data) {
return;
}
subCategory.append($('<option></option>').val('').text('Please select')); // Do not give the option a value!
$.each(data, function (index, item) {
subCategory.append($('<option></option>').val(item.Value).text(item.Text));
});
});
});
$(function () {
$('#addbudgetdetail').on('click', function () {
jQuery.get('#Url.Action("AddBudgetDetail", "Budget")').done(function (html) {
$('#new-budgetdetail').append(html);
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
});
});
$(".deleteRow").on("click", '', function () {
$(this).parents("#budgetRow:first").remove();
return false;
});
});
</script>
}
}
How can I accomplish passing the json data to this view and turning the view into and updating form instead of a create form?
I try to create a dynamic invoice, i have quantity and price column, and then i get total Value Of Products, so when i change value of quantity, price and total value should be changed, i find a way to change price but total value does not work:
<div class="container" ng-controller="OrderController" ng-init="quantity=1">
<div id="order-detail-content" class=" row">
<table id="cart_summary">
<thead>
<tr>
<th>Total</th>
<th> </th>
<th>Qty</th>
<th>Unit price</th>
<th>Availability</th>
<th>Description</th>
<th>Product</th>
</tr>
</thead>
<tfoot>
<tr class="cart_total_price">
<td colspan="2" class="price" id="total_product">{{totalValueOfProducts}}</td>
<td colspan="3" class="text-right">Total</td>
<td rowspan="4" colspan="3" id="cart_voucher" class="cart_voucher"></td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="order in Orders track by $index" >
<td class="cart_total" data-title="Total">
<span class="price" id="total_product_price_3_13_0">
{{order.Price * quantity}}
</span>
</td>
<td >
<input size="2" ng-model="quantity" type="text" value="1" name="quantity_3_13_0_0">
</td>
<td>
<ul class="price text-right" id="product_price_3_13_0">
<li ng-model="order.Price" class="price"> {{order.Price}}</li>
</ul>
</td>
<td class="cart_description">
<p style="color:black" class="product-name">{{order.ProductName}}</p>
<hr />
<small style="color:black" class="cart_ref">{{order.ProductDescription}}</small>
</td>
<td class="cart_product">
<img ng-src="" alt="Printed Dress" width="98" height="98">
</td>
</tr>
</tbody>
</table>
</div> <!-- end order-detail-content -->
and in controller i define $watch on quantity :
<script>
app.controller('OrderController', function ($scope, $http) {
$scope.Orders = {};
$scope.GetOrders = function () {
$http.get('/Order/GetAllOrders').success(function (response) {
$scope.Orders = response;
//debugger;
GetTotalValueOfProducts(response);
});
}
$scope.GetOrders();
GetTotalValueOfProducts = function (response) {
//debugger;
$scope.totalValueOfProducts = 0;
for (var i = 0; i < response.length; i++) {
$scope.totalValueOfProducts += response[i].Price * $scope.quantity;
}
}
$scope.$watch('quantity', function () {
debugger;
$scope.GetOrders();
});
});
</script>
when i changed value of quantity, the value of totalValueOfProducts was not changed!why $watch did not work? what is the problem?
'quantity' needs to be in the $scope for the binding to take place
on a separate note, it would be better to move all data (orders, quantity etc) into a service, it would better adhere to angular's MVC paradigm
<table>
<tr>
<td><input type="radio" name="groupName" value="song" ng-model="$parent.selectedSong"/></td>
<td>{{song.name}}</td>
<td>{{song.artist}}</td>
<td>{{song.genre}}</td>
<td>{{song.price}}</td>
<td>
<input type="button" value="Delete" ng-click="deleteItem(song.id)" />
</td>
<td>
<input type="button" value="View" ng-click="go('OneSong', song)" />
</td>
</tr>
</table>
<table border="1">
<tr><td id="Td1">Correct Table</td></tr>
<tr>
<td>Name: </td>
<td><input type="text" ng-model="editItem.name"/></td>
</tr>
<tr>
<td>Artist: </td>
<td><input type="text" ng-model="editItem.artist"/></td>
</tr>
<tr>
<td>Genre: </td>
<td><input type="text" ng-model="editItem.genre"/></td>
</tr>
<tr>
<td>Price: </td>
<td><input type="text" ng-model="editItem.price"/></td>
</tr>
<tr>
<td colspan="2">
<!--<input type="button" value="Insert "ng-click="addItem()"/>-->
Add New Song
<input type="button" value="Update" ng-click="updateItem()"/>
<input type="button" value="Cancel" ng-click="cancel()"/>
</td>
</tr>
</table>
From the little information you provided, I am taking a stab at this:
http://jsfiddle.net/V44fQ/
var app = angular.module('songApp',[]);
app.controller('SongCtrl',function($scope) {
$scope.edit_song = {};
$scope.song = [
{name:'Heartbreaker',artist:'Led Zeppelin',genre:'Rock',price:'.99'},
{name:'War Pigs',artist:'Black Sabbath',genre:'Rock',price:'.99'}
];
$scope.applySong = function(song) {
$scope.edit_song = angular.copy(song);
$scope.edit_song.song_index = $scope.song.indexOf(song);
};
$scope.saveSong = function() {
var idx = $scope.edit_song.song_index;
$scope.song[idx] = $scope.edit_song;
$scope.cancelSong();
};
$scope.cancelSong = function() {
$scope.edit_song = {};
};
});