Angularjs Binding data to other table by check radio button, and update after click button - angularjs

<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 = {};
};
});

Related

How can I click on an HTML row then show the values of the row in input texts

How can I click on an HTML row then show the values of the row in input texts to able the user to edit them.
in controller :
$scope.data = [];
$scope.selectedMember = { Code: "", Latin: "", Local: "" }; //new property
$scope.showInEdit = function (member)
{
$scope.selectedMember = member;
}
in ng-repeat :
<table border="1" ng-hide="Hide">
<thead>
<tr>
<th>Code</th>
<th>Latin Description</th>
<th>Local Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local track by $index">
<td>{{c.Staff_Type_Code}}</td>
<td>{{c.L_Desc}}</td>
<td>{{c.A_Desc}}</td>
<!--<td><input type="button" value="Edit" ng-click="Edit(c)"/> </td>-->
</tr>
</tbody>
</table>
In HTML :
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Thanks lot
You just need to update your scope variables in function like
$scope.Latin.L_Desc = c.example;
After that you'll see these values in input fields.
If you want to show values in this code
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Then your object must be like this :
$scope.selectedMember = { Code: "", Latin: {A_Desc:""}, Local: {L_Desc:""} };
And in controller function
$scope.showInEdit = function (member)
{
$scope.selectedMember.Latin.L_Desc = member;
}

Edit function is not properly working in angular JS

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/

ng-repeat not binding event though I'm getting data

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

Update row in Angular JS

I am submiting a form using Angular JS and Web service. Here is code-
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="EmpName" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="EmpAge" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="EmpCity" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
I want to make these text boxes reusable on Edit i.e. on edit click corresponding rows item must be filled and the Save button should now be working like Update button.
How can I do it?
Alternatively How can I make row editable?
Ideally you would wanna create the models as
Employee.Name , Employee.Age , Employee.City
Now
<table>
<tr>
<td style="text-align: right;">Name :
</td>
<td>
<input type="text" id="txtEmpName" ng-model="Employee.Name" />
</td>
</tr>
<tr>
<td style="text-align: right;">Age :
</td>
<td>
<input type="text" id="txtEmpAge" ng-model="Employee.Age" />
</td>
</tr>
<tr>
<td style="text-align: right;">City :
</td>
<td>
<input type="text" id="txtEmpCity" ng-model="Employee.City" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button>
</td>
</tr>
</table>
In the Controller
$scope.saveEmployee = function(){
if($scope.Employee.id){
// Id will be present for a existing employee
// update the Employee
}else {
// Id not present
// create the employee
}
}
I would have an Employee.save() in the model which can identify weather to save or update the Employee

how to validate input in angularJS before the button press to add item in html table

How to validate the input elements before performing any operation, I have four html input element and html table when you click item on add to list it added item in HTML table now my problem is validation, I want to validate input elements on button click.
<div ng-controller="BookStore">
<br />
<h2>Add New Book</h2>
<div style="border: 1px solid blue;">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" /></td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" /></td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Button" value="Add to list" ng-click="addItem(item)" />
</td>
</tr>
</table>
</div>
<div style="padding-top: 15px;">
<table border="1" class="mytable">
<tr>
<td>ISBN</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total Price</td>
<td>Action</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.ISBN}}</td>
<td>
<span ng-hide="editMode">{{item.Name}}</span>
<input type="text" ng-show="editMode" ng-model="item.Name" />
</td>
<td>
<span ng-hide="editMode">{{item.Price}}</span>
<input type="number" ng-show="editMode" ng-model="item.Price" /></td>
<td>
<span ng-hide="editMode">{{item.Quantity}}</span>
<input type="number" ng-show="editMode" ng-model="item.Quantity" /></td>
<td>{{(item.Quantity) * (item.Price)}}</td>
<td><span>
<button type="submit" ng-hide="editMode" ng-click="editMode = true; editItem(item)">Edit</button></span>
<span>
<button type="submit" ng-show="editMode" ng-click="editMode = false">Save</button></span>
<span>
<input type="button" value="Delete" ng-click="removeItem($index)" /></span></td>
</tr>
<tr ng-show="!(items).length">
<td style="text-align: center" colspan="7">No item exist</td>
</tr>
</table>
</div>
<br />
<div style="font-weight: bold">Grand Total: {{totalPrice()}}</div>
<br />
</div>
Click here to see code
You need to use validation of the form. For this wrap your table into form tag and use ngSubmit directive (or ngClick on the type="submit" button).
In your case you want required constraint added to form fields. Then it makes sense to disable submit button until form is valid ng-disabled="bookForm.$invalid".
All together:
<form novalidate ng-submit="addItem(item)" name="bookForm">
<table>
<tr>
<td>ISBN: </td>
<td>
<input type="text" ng-model="item.ISBN" required />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" ng-model="item.Name" required />
</td>
</tr>
<tr>
<td>Price(In Rupee): </td>
<td>
<input type="number" ng-model="item.Price" required />
</td>
</tr>
<tr>
<td>Quantity: </td>
<td>
<input type="number" ng-model="item.Quantity" required />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" ng-disabled="bookForm.$invalid" value="Add to list" />
</td>
</tr>
</table>
</form>
Demo: http://plnkr.co/edit/JIozQNai88dHipaIfeLH?p=preview
i have found the answer i make button disabled when the texboxes are empty
<div class="col-xs-12 col-sm-12">
<button class="btn btn-xs btn-primary" type="button" value="Add To List" ng-disabled="!item.Description || !item.FileName || !item.Path" ng-click="item.Description;addItem(item)">Add</button>
</div>
Click Here to see the plunker code

Resources