How to add a new record and not update previous record in angularjs - angularjs

How do I add a new record and have angular "forget" the new item added after I click the corresponding button.
The ability to add a record works and when I add the new record it display in the table I have, correctly, However my problem is that when I go to add a second record ie I remove the previous input and type something else. This results in the newly added record below to also change.
In short after I add an item to my array I want angular to forget it. How do I accomplish this.
In my controller I have this
(function () {
var app = angular.module("mainApp");
var ordersController = function ($scope,$filter, ordersService,customerService) {
$scope.orders = [];
$scope.addOrder = function (newOrder) {
$scope.orders.push(newOrder);
}
app.controller("ordersController", ["$scope","$filter", "ordersService","customerService", ordersController]);
}());
in my html I have this
<div><table>
<tr>
<td><input ng-model="item.quantity" type="text" /></td>
<td><button type="button" ng-click="addOrder(item)">Add Line Item</button></td>
</tr>
</table></div>
<div>
<table>
<tr ng-repeat="order in orders track by $index">
<td>
{{ order.quantity }}
</td>
</tr>
</table>
</div>

The problem might be that you are adding the newOrder object to the array while Angular keeps it's model bound to that object. Try using Angular's copy functionality like this (assuming that you are using Angular 1):
$scope.addOrder = function (newOrder) {
var copiedOrder = angular.copy(newOrder);
$scope.orders.push(copiedOrder);
}
The documentation for the copy method can be found here.

Related

Laravel: Generated buttons with loop (How to tell which one is click)

Hello Again Stockoverflow,
Hope all is well with you,
Can you help me again with Laravel/Ajax?
From the given code below I generated the table shown on the picture,
what I want to accomplish is to save each row when a button is click,
I know enough ajax to do the saving, the problem is how can I tell ajax and jquery which row button is click and which text input has the value since, the text inputs and buttons are generated with loop/array?
Thanks.
if($list_factors)
{
foreach ($list_factors as $key => $list_factor) {
// dd($list_factors);
$output.='<tr>'.
'<td>'.$list_factor->id.'</td>'.
'<td>'.$list_factor->factor_description.'</td>'.
'<td><input type="text" id="score" /></td>'.
'<td><button class="btn btn-info" id="submitScore">OK</button></td>'.
'</tr>';
}
return Response($output);
}
First of all, you can't use id="submitScore" attribute in the button generated within the loop because id must be unique. Instead you can use class="submitScore". Also, you can't use id="score" in the input, use class="score" Since you are going to use jQuery then you may try something like this:
// Register the event handler on 'submitScore' class of button
$('button.submitScore').on("click", function(e) {
var row = $(this).closest('tr');
var inputValue = row.find('.score').val();
console.log(inputValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input class='score' /></td>
<td><button class='submitScore'>OK</button></td>
</tr>
<tr>
<td><input class='score' /></td>
<td><button class='submitScore'>OK</button></td>
</tr>
</table>

How do I make hyperlink move to next page taking angularjs variable with it?

I have a table row being populated with the array of Json objects.
I actually want to click one of the row item and move to the next page by also taking the clicked item's id.
My Code:
AngularJS function
$scope.findAllCompanies = function() {
$http.get('http://blahblablah/company/all').
then(function(response) {
$scope.companyList = response.data;
});
}
HTML: traversing the companyList
<tr data-ng-repeat="company in companyList">
<td> {{company.companyId}} </td>
<td> {{company.legalName}} </td>
<td> {{company.dbaName}} </td>
<td> {{company.formation}} </td>
</tr>
So now, If I click on companyId in any row, the page should be redirected to company.html?companyId=anyNum
I am thinking to merge them here, something like this:
Thanks, and looking forward to hear from you.
Using ng-href
<a ng-href="/pages/company?companyId={{company.companyId}}"> {{company.companyId}} </a>

How to disable/enable sorting while editing in Angularjs

I have a editTable like this:
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td><span ng-show='!guest.isedit'>{{guest.firstname}}</span><span ng-show='guest.isedit'><input type="text" ng-model='guest.firstname'/></span></td>
<td><span ng-show='!guest.isedit'>mode_edit</i></span><span ng-show='guest.isedit'><button ng-click='contactUpdate(guest)'>OK</button></span></td>
</tr>
in my controller:
$scope.editGuest = function(guest){
delete $scope.orderByField;
guest.isedit = true;
};
$scope.contactUpdate = function(guest){
//Save the change then put the order back to re-order the table
$scope.orderByField = 'firstname';
}
As you can see, this is a editable table, if I click edit, the table becomes editable. I want to disable the sort when editing, until user finish editing and hit the OK button(Which already saved in the server), then I will re-order with new data. The problem is for the first time I fire editGuest(guest),it will still jump. Is there any way I can achieve this?
You need to have a different ng-model on your input box like this :
<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
<td>
<span ng-show='!guest.isedit'>{{guest.firstname}}</span>
<span ng-show='guest.isedit'><input type="text" value="{{ guest.firstname }}" ng-model='firstname'/></span>//I have set the value to the guest's firstname to default the name when the input box becomes active. You can also use ng-init to achieve it.
</td>
<td>
<span ng-show='!guest.isedit'>mode_edit</i></span>
<span ng-show='guest.isedit'><button ng-click='contactUpdate(firstname)'>OK</button></span></td>
</tr>
In your Controller :
$scope.contactUpdate(guest, name){
guest.firstname = name;
name = '';//EDIT
}
You need to remove binding first for this.
Create clone of guestList object and do the editing operation on it.
once it is done assign the clone object back to guestList.
e.g.
var dummyGuestList = angular.copy(guestList)
//some operation on dummyGuestList ;
guestList = dummyGuestList //assign bacl again

turn off re-sorting in angularJS while editing

I have an AngularJS app that lists a bunch of items in a table. Like this:
<table class='unstyled tmain'>
<tr>
<td ng-click='setSort($event)'>X</td>
<td ng-click='setSort($event)'>Desc</td>
<td ng-click='setSort($event)'>created</td>
<td> </td>
</tr>
<tr ng-repeat="item in items | orderBy:itemNormalizationFunction:sortReverse">
<td><input type='checkbox' ng-model='item.done'
ng-click='onCheckedChanged(item)'/></td>
<td><div edit-in-place="item.text"
on-save="updateItemText(value,previousValue,item)"></div></td>
<td><span class='foo'>{{item.created | dateFormatter}}</span></td>
</tr>
</table>
The table headers are clickable to set the sort order. The cell in the 2nd column in each data row is editable "in place" - if you click on the text it gets replaced with an input textbox, and the user can edit the text. I have a little directive enabling that. This all works.
The problem comes in while editing. Suppose I have it set to sort by "description" (the 2nd column). Then if I edit the description (via the edit-in-place directive), as I am typing in the input box, the sort order changes. If I change the first few characters, then angular re-sorts and the item is no longer under my cursor. Nor is it even focused. I have to go hunting through the list to find out where it got re-sorted to, then I can re-focus, and resume typing.
This is kinda lame.
What I'd like to do is tell angular to (a) stop re-sorting while I am keying in the input box, or (b) sort on a separate (not-displayed) index value that preserves the ordering before the edit began. But I don't know how to do either of those. Can anyone give me a hint?
I know this is sort of complicated so I'll try to put together a plunkr to show what's happening.
This is the plunkr that shows how I solved the problem.
http://embed.plnkr.co/eBbjOqNly2QFKkmz9EIh/preview
You can create custom filter and call that only when necessary. Example when you click on 'Grid header' for sorting or after dynamically adding/removing values to array, or simply click of a button(Refresh Grid)
You need to dependency Inject Angular filter and sort filter
angular
.module('MyModule')
.controller('MyController', ['filterFilter', '$filter', MyContFunc])
function ExpenseSubmitter(funcAngularFilter, funcAngularFilterOrderBy) {
oCont = this;
oCont.ArrayOfData = [{
name: 'RackBar',
age: 24
}, {
name: 'BamaO',
age: 48
}];
oCont.sortOnColumn = 'age';
oCont.orderBy = false;
var SearchObj = {
name: 'Bama'
};
oCont.RefreshGrid = function() {
oCont.ArrayOfData = funcAngularFilter(oCont.ArrayOfData, SearchObj);
oCont.ArrayOfData = funcAngularFilterOrderBy('orderBy')(oCont.ArrayOfData, oCont.sortOnColumn, oCont.orderBy);
}
}
and call in HTML something like:
<table>
<thead>
<tr>
<th ng-click="oCont.sortOnColumn = 'age'; oCont.RefreshGrid()">Age</th>
<th ng-click="oCont.sortOnColumn = 'name'; oCont.RefreshGrid()">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="val in oCont.ArrayOfData">
<td>{{val.age}}</td>
<td>{{val.name}}</td>
</tr>
</tbody>
</table>

Hide/show particular element on click with AngularJS

I have an HTML table with many rows in it and want to hide a row when the user clicks the delete button for that particular row. I'm having trouble doing it with Angular and the ng-hide directive.
Here's my (simplified) HTML code for just two rows:
<tr ng-hide="isRowHidden">
<td>Example template title</td>
<td>
Delete template
</td>
</tr>
<tr ng-hide="isRowHidden">
<td>Another example template title</td>
<td>
Delete template
</td>
</tr>
And here is my Angular code (in CoffeeScript) thus far:
$scope.deleteTemplate = (templateId) ->
console.log "Deleting template id #{templateId}"
$scope.isRowHidden = true
I know that the last line is incorrect because it hides all rows instead of just one. What am I missing? Thanks!
You need to model the data as an array with multiple isRowHidden values, then list the rows via ng-repeat:
http://jsfiddle.net/XqchD/ (uses JS, not coffee)
myApp = angular.module("myApp", [])
FieldCtrl = ($scope) ->
$scope.data = fields: [
value: "1F"
isRowHidden: false
,
value: "2F"
isRowHidden: false
]
$scope.deleteTemplate = (field) ->
console.log field
field.isRowHidden = true
HTML:
<table ng-repeat="field in data.fields">
<tr ng-hide="field.isRowHidden">
<td>{{field.value}}</td>
<td>
Delete template
</td>
</tr>
</table>

Resources