I have one div with two fields.For first time if no records are there i want to save it .Right now it is happening.After that i am displaying the data.But if i change the data and update it is adding new row with updated data instead of updating same row.
Here is my html
<div class="col-xs-12 col-sm-12 col-md-12"
<tbody>
<tr role="row" class="even" data-ng-repeat="infraitem in
allInfraitemsByType">
<td><strong>{{infraitem.name}}</strong></td>
<td><input type="text"
name="requiredseat" data-ng-model="infraitem.requiredseat"></td>
<td>
<input type="text" name="available" data-ng-
model="infraitem.available"></td>
<td class="text-center"><button type="submit" class="btn GreenBtn"
data-ng-click="saveInfrastructureDetails(infraitem)"><span
class="glyphicon glyphicon-ok"></span>Save</button></td>
</tr>
</tbody>
</div>
Here is the controller.js
$scope.saveInfrastructureDetails = function(infraitem){
AdminCollegeService.saveInfrastructureDetails(infraitem).then
(function(response)
{
if(response.data=="success")
{
$scope.infraitem = {};
$scope.successmessageinfra="Infra Structure Details Saved";
});
}
Can anyone tell how to update same row if data is already present instead of adding new record.
make sure $scope.saveInfrastructureDetails function is hitting
make sure $scope.saveInfrastructureDetails is update the data to database or insert the data.
But the main think is
make sure are you using form tag for inserting records, if yes then change your update button type type="submit" to type="button"
This below sample like a key. I am saving and updating data with a array.
EDIT
angular.module("test",[]).controller("testCont", function($scope)
{
$scope.testArray =[{id:1,name:"Me"},{id:0,name:''}];
$scope.Save=function(data)
{
if(data.id == 0)
{
data.id=2;//instert code
}
else
{
return false;// you can call your update code
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller='testCont'>
<table>
<tr ng-repeat="testobject in testArray">
<td>Name {{testobject.id}}</td>
<td>
<input type="text" ng-model="testobject.name" />
</td>
<td><input value="save" type="button" ng-click="Save(testobject)" /></td>
</tr>
</table>
</div>
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/
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'm trying to build todo list app in angular. When you add new item, it will add to input box(by default, i set it to disabled) inside the table and also add Edit link next to that input. Once i click on the Edit, the input box will enable. ( i got it working with this code (Edit).
My question is how to replace ng-click="editable=!editable" with ng-click="edit()". I tried to write that Edit function, but i can't get it to work. Please help.
My code on jsfiddle
Thanks so much.
<body ng-app="shoppingList">
<div ng-controller="mainController">
<h1>My Shopping List</h1>
<form class="form-inline" ng-submit="addItem()">
<div class="form-group">
<input type="text" ng-model="newItem">
</div>
<input type="submit" value="Add">
</form>
<div>
<table>
<thead>
<tr>
<th>Item</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items track by $index">
<td><input ng-disabled="!editable" type="text" value="{{item}}"></td>
<td ng-click="editable=!editable">Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
(function(){
var app = angular.module('shoppingList',[]);
app.controller('mainController',function($scope){
$scope.items=[];
$scope.addItem = function(){
$scope.items.push($scope.newItem);
};
$scope.edit = function(){
// i need to move editable=!editable into this function
// but i don't know how to do that
}
});
}());
</script>
You could save the editable property of the todo item, and then us it like this.
$scope.addItem = function(){
$scope.items.push({text: $scope.newItem,editable:false});
};
$scope.edit = function(item){
item.editable = !item.editable;
console.log(item)
}
$scope.save = function(item){
console.log("saved")
item.editable = !item.editable;
}
html
<tr ng-repeat="item in items track by $index">
<td><input ng-disabled="!item.editable" ng-blur="save(item)" type="text" value="{{item.text}}"></td>
<td ng-click="edit(item)">Edit</td>
</tr>
I think this is simplest one, but there is always a better approach. Let us know. What is ngBlur
Now I need to delete row(s) depends on it is selected or not. But how can I access $index in the control for each selected row?
my code is here:
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="delete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
}
var deletes=[];
$scope.delete=false;
$scope.remove = function(){
console.log(deletes);
angular.forEach($scope.delete,function(v){
if(v==true){
deletes.push($index);*How can I get the $index for selected row*
console.log(deletes);
}
});
angular.forEach(deletes,function(v,k){
$scope.dataList.splice(v, 1);
})
}
});
Now I can add the row which match the requirement, but my issue is user have to check the checkedbox in the row which they want to delete and then click delete button to delete them. for example, they can check the first and third row to delete and only keep second row.
<div ng-app="appTable">
<div ng-controller="Allocation">
<button ng-click="add()"> Add </button>
<button ng-click="remove()">remove</button>
<table>
<th>
<td>S.No</td>
<td>Name</td>
<td>Dept</td>
</th>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" ng-model="data.isDelete"/>{{$index}}</td>
<td> <input type="text" ng-model="data.name"/></td>
<td><input type="text" ng-model="data.dept"/></td>
</tr>
</table>
</div>
</div>
var app = angular.module("appTable",[]);
app.controller("Allocation",function($scope) {
$scope.dataList = [{name:'lin',dept:'b'},{name:'test',dept:'aaa'}];
$scope.add = function(){
var data = {};
data.name ='' ;
data.dept ='';
$scope.dataList.push(data);
};
$scope.remove = function(){
var newDataList=[];
angular.forEach($scope.dataList,function(v){
if(!v.isDelete){
newDataList.push(v);
}
}); $scope.dataList=newDataList;
};
});
https://jsfiddle.net/9qttf7ph/
You might need to add the following in your ng-repeat directive :
<tr ng-repeat="data in dataList track by $index">
and then use $index for deletion.
you can get more informations about this here from the official angular documentation.
Replace
<input type="checkbox" ng-model="delete"/>
by
<input type="checkbox" ng-model="data.toBeDeleted"/>
Then, on the click of the button, remove all the data which have a truthy toBeDeleted attribute from the array.
I have created a table from 2 different arrays in AngularJS that contain employees name and services and rest of the cells contain Checkboxes now I want get the ID's of selected Checkboxes that I have created another array in the controller,
but the view allows me to select only one Checkbox from many in the row
here is my Html
<form ng-submit="save()">
<table border="1">
<tr>
<td><strong>Services</strong></td>
<td ng-repeat="e in PBA">{{e.Name}}</td>
</td>
<tr ng-repeat="(index,i) in SOB">
<td>{{i.Name}}</td>
<td ng-repeat="e in PBA track by $index">
<input type="checkbox" name="cb" ng-true-value="{{e.Id}}_{{i.Id}}" ng-model="ids[index]" />
</td>
</tr>
</table>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" />
</div>
</form>