I made a list of arrays using JSON and display it as links. Now, I have textboxes below the lists where the array list item would appear if it was clicked. How would I update the value of the array list item if I changed it on the textbox and clicked on save so that even if the page is refreshed, the new data should appear on the list instead of the old one.
By the way, the codes for the array, displaying the array, the textboxes and buttons are all in the same html page.
To start with, you can use JSON.stringify on the array object and put it in the text box. After manual editing, apply it to the array using JSON.parse.
Related
I have a spreadsheet like table structure which the user can enter data into by clicking on the appropriate cell. The onClick event within a table cell triggers a method which positions an input element within the same div containing the display data (using prepend), and hides the cell data by setting a ng-hide variable to true for the cell data selected. When the user navigates away from the cell, the ng-hide variable on display div is set to false to redisplay the new value.
There is a lot of advice about not manipulating the Dom in AngularJs which I presume means not using the various jqlite or jquery methods like "prepend" But short of moving an input cell around the spreadsheet, it seems like the more "pure AngularJS" way would be to every cell in my table contain both an input element (normally hidden) and a display div (normally displayed), with the visibility controlled by ng-if or ng-hide so that when a cell receives user focus, the display element is hidden and the input element is shown and when it loses focus, vice versa. However, these spreadsheets (which maybe 100+ rows, and therefore 1000_ cells) will have a lot of extra hidden input elements and somehow seems sub-optimal. But maybe that is the best way to do this in AngularJS?
We are using slickgrid in our angular directive.
And we would like to use another list directive (simple select element with input) in a cell/column of Slickgrid.
I want the list element to be visible when the grid is available, so user knows there is a list. Therefor I am using the list directive as formatter. It Is visible when the grid is rendered.
The Problem:
When the cell that holds list element is clicked, the editor mode is never fired because of the list element click event.
We thought to use an image of list that user knows there is a list, and when clicked open the list.
Is there a better way to do it?
We have managed to get it done using list directive as our rendere/formatter as well as editor.
We made our list directive as ReadOnly so it does not fire click event. And now one sees a list element when grid is rendered. And when one clicks on the cell with list, the list is automatically opened via code. The only problem we have now with this solution is that how to copy selected Item from editor to formatter (if anyone knows, please share).
Any better solution is also welcomed.
This forked Plunker shows two ng-repeats each displaying an array as a list. Each list item uses a custom directive to animate whenever an up or down arrow is clicked.
The first list, which records changes to array item values animates correctly but the second, which records changes to array item indexes does not.
Can anybody suggest how to edit the directive to animate the second list correctly?
The way you move the elements triggers incorrect animation. Try to do it like this
function arrayMove(arrayVar, from, to) {
var item = arrayVar.splice(from, 1).pop();
arrayVar.splice(to, 0, angular.copy(item));
}
You need to make a (deep) copy of the element to preserve some properties like $$hashkey used by AngularJS to track the objects.
I'm trying to make an app whoes purpose is to show string arrays in a listview.
I have an XML file stored in the res/values folder whitch contains several string arrays, the arrays are named list1, list2, list3 etc.
Now, I want to show the arrays one by one by cliking a "Next" button in my UI.
I want the "Next" button to clear the current array and load the next one.
Can anyone help?
I have a similar issue to what is stated in the 2 posts below - I have 3 ng repeats in a partial, when I update the source arrays the changes are not reflected in the view.
ng-repeat's element not updated on array modification
AngularJS not refreshing ngRepeat when updating array
The ng repeats are within 3 ul's with each listing out input checkboxes with ng click on each, if I check an input from the the first list then my js code runs through the other 2 arrays, finds matching inputs and sets a property called IsSelected to true which is bound to ng checked of each input. e.g regions in the first list - if I check europe, then it checks all the European countries in the second list, and all the related cities in the 3rd list when I click on an apply button. $scope.$apply() after the js code for setting IsSelected doesnt work, but if I set the arrays to null then the view appears empty for that particular list. I then tried to use track with a property that constantly changes when I update the array elements like a guid but that also doesnt work. If it was a scope issue then why would setting the array to null then update the view as suspected?