I am new to AngularJS and I am attempting to edit table data. I do not want to use a grid editor due to 508 compliance (and client preference). The preferred functionality is to click on a row and a form is populated with the row data.
The problem that I am having is when I edit data in the form it automatically updates the table data. I have separate $scope variables for the table data and the form data so I am confused as to why this is happening. This is causing all edits to automatically be saved. See below for a jsfiddle with a simplified table of my issue.
http://jsfiddle.net/sknnw5wk/
Ignore code, just in so SO does not complain about JSFiddle link, all code is in JSFiddle
$scope.editData = function (rowId) {
'use strict';
$scope.currentEditId = rowId;
$scope.managementBaselineEdit = $scope.formData.managementBaseline.operations[rowId];
}
You can avoid that behaviour by making a copy of selected object ie:
$scope.managementBaselineEdit = angular.copy($scope.formData.managementBaseline.operations[rowId]);
please see working demo here
http://jsfiddle.net/cq7v5p4o/
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
I need to make 2 tables in which I can select data in one table and with submit show it in another table. Then with remove button to put it back to the first table. This is what I came up with so far. Can anyone assist me please?
<script async src="//jsfiddle.net/morka/65w7Lc96/embed/"></script>
https://jsfiddle.net/morka/65w7Lc96/
The main problem seems in your addItems function which is currently returning true or false, instead of adding items actually. You need to change your addItems function like following:
addItems: function(){
this.newItems = this.selected;
}
Also as you are just pushing names in this.selected, you have to remove .name when rendering table of newItems. You can change the code to by pushing the object in this.selected to access name ini newItems.
Check the working fiddle.
I have done a very small code on Plunkr under URL http://plnkr.co/wbVjBfpAA9WTpjEAs1GJ
I define first a Array Object which I display on a page with ng-repeat. No problem
Then on each item I add an Edit button and launch a function on ng-click
Now, I copy the selected array item into a new $scope.contractDetail and display this in the edit section (as input).
To my surprise when I start to edit the text in the input field, not only the $scope.contractDetail object gets updated but also the parent $scope.contracts.
I though I would, after edit to assign my $scontractDetail object specifically back into the $scope.contracts object at the given index.
Can somebody explain to me whta is happening here
thanks a lot
Copying your code from the plunkr to show:
angular.module('plunker', [])
.controller('MainCtrl', function($scope){
$scope.contracts = [{title: 'Master License Agreement'},{title: 'Limited Use Agreement'},{title: 'NDA'}];
$scope.editContract = function(indx){
$scope.contractDetail = $scope.contracts[indx];
}
})
Objects in JavaScript are essentially passed by reference, so when you set:
$scope.contractDetail = $scope.contracts[indx];
The two objects are the same object. When you begin to edit it, Android's dirty checking picks that up and shows the change in the other spot.
If you want to create a copy to edit (for an edit + save/cancel scenario) you can use angular.copy(obj) to create a duplicate that is not the same object.
I am using ExtJS API for CRUD operations in grid. All of my code works fine except one small thing. When I add a record first time(when the page is loaded) the new record is not shown on the grid but it is added in the database. When I refreshes the page and insert a record it is shown as soon as it is added. This is a very strange behavior and I don't even have a clue what's going on here. Here is the code I am using to insert a record:
insertUser: function (button) {
var grid = Ext.ComponentQuery.query('#userlist');
var win = button.up('window');
form = win.down('form');
record = form.getRecord();
values = form.getValues();
this.getUsersStore().add(values);
this.getUsersStore().reload();//tried this.getUsersStore().load(); also
win.close();
}
Can any one point out what's wrong going on here? Thanks.
When adding a data to store it needs to be in the format of the store record.
For example
this.getUsersStore().add({username:'Sample User', userid: 210, userphone: '999-999-9000'});
In your code it seems that you are directly passing the values.
If you add the record correctly store does't need to do reload() or refreshed, if you reload() the store gets refreshed and the data you added will not be present.
On my page I show the first and last name of a person using labels.
It is then possible to edit the first and last name in a couple of input-fields. I only want to update the labels, when the user hits save, but when updating the input-fields, the labels update as well. How do I make sure, the labels are only updated on save ?
I have created a plunker here to show the issue: http://plnkr.co/edit/WSpZeifClaIL81GUI2eP?p=preview
Note that the labels change when the input is updated.
thanks
Thomas
Here is an updated plunker.
Just clone the object you are working on with angular.copy.
app.controller('MainCtrl', function($scope) {
$scope.data={first_name:"John", last_name:"Doe"};
$scope.user=angular.copy($scope.data);
$scope.staticUser=$scope.data;
This will create a deep copy of the object and therefore you won't be referencing the same object. The rest of your code works as is.