Adding inputs dynamically not working properly - javascript

I have an issue trying to add inputs dynamically.
I have this:
<button ng-click="operations.push({})">Add input</button>
which is adding inputs:
<div ng-repeat="operation in operations">
<input ng-model="operation.detailText">
</div>
I have 2 columns, where I have exactly the same due to an ng-repeat, so, in both columns I have the adding inputs button, When I click on the button Add input, I am adding the inputs to both columns, which I don't want, I need to add those inputs only to the current input where I am working on.
I made a video for you to see what I am talking about.
Here the video
Check here for the code: jsbin

I think you are using the same array for both the ng-repeat that is
operations
So when you click on add button it adds an empty object to operations and both the ng-repeat is affected since they both are using the same array.
You need to have different arrays, something like operations and operations1 and then write the second ng-repeat with operations1

Related

onclick on the add the new row in the table

I am just started with angular.I have a table and a button. on-click on the button a new row like previous one should be added in the table.i have added stackblitz link below. i am struggling to figure that out.thanks in advance.
stackblitz link
Here is an example https://stackblitz.com/edit/angular-rs6bkq. You need to create an arbitrary array and use its length to define how many rows to display. Notice the *ngFor directive placed on the tr tag. This is effectively a for loop in your HTML for the number of items in your array. So if you change the length of your array using a function call the number of table rows will update to reflect this.
You can read more about structural directives (like ngFor) here - https://angular.io/guide/structural-directives
Check this if it helps : https://stackblitz.com/edit/angular-add-new-row
I have added some modifications to let inputs have different values.

With AMP HTML, is it possible to get ID or other properties from clicked element, append them and create URL for an anchor tag?

I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.
I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.
Here are the steps:
show set of checkboxes.
user can click any of these checkboxes
as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.
Is this at all possible? Thanks
Documentation is not very clear on how to approx complex logic and not much found on searching.
One option is to use amp-selector and then limit the number of selected items when binding using .slice():
<amp-state id="selected">
<script type="application/json">[]</script>
</amp-state>
<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
<div option="1">First</div>
<div option="2">Second</div>
<div option="3">Third</div>
</amp-selector>
<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
Click me
This limits the number of selected IDs to two and displays a warning if the user selected all three.

To remove check box from angular-ivh-treeview

I have created one tree using angular-ivh-treeview with objects, by following the code given at : https://github.com/iVantage/angular-ivh-treeview
The running sample of the tree is : http://jsbin.com/rigepe/1
The tree preparing fine with my data, but my requirement is to allow user to select one object at one time, so need to remove check boxes from the given code.
I have tried by making duplicate js with removing span of check box but its not working, also we have used both js with and without check boxes, but is also not working
What will be best way to remove check boxes from the tree.
You can remove them in your HTML inside a <div> like this:
<ng-controller="MyCtrl as fancy">
<div ivh-treeview="fancy.bag"
ivh-treeview-use-checkboxes="false">
</div>

How to detect change in form if added a new row in prime faces datatable

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.
Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

How can i get Knockout to generate new HTML that has bindings

I have created a form with knockout that will allow the ability to give a product dynamic attributes: (i.e. size - small, med, lg). This is generated by input field and a multi select drop down.
When the fields have been filled out and the selection list which is the attribute values has been generated, I can add them to an observable attribute array.
The problem I can't see is I need to display these attributes and their array of values, but I also need them to be editable. I wasn't so keen on the idea of them be reloaded into the main form where it was created - but maybe that is the best way.
Maybe just listing the attributes as uneditable list of attributes
example:
Name: <span data-bind="text: attributeName"></span> <select height="5" data-bind="options: attributesValues"> <button data-bind="click: edit">Edit</button>
And if they click edit it loads it into the form that they created it from so it can be edited.
However, I wanted to see if there is a way to do inline editing and bind to the added Attributes and each of their array of attributeValues. So when they remove an attributeValue from the list, it would remove it from the array of that particular attribute.
Any thoughts?
So, I am not too confident I understood exactly what you are trying to do, and the one line of code you posted didn't really clarify it. I threw this fiddle together that has a multi-select for attributes, and lets you add new products with the select attributes. Once added, the new product has those attributes as select's of there own, which can still be edited. If this isn't what you are after, please try to clarify, and maybe post some more code.
Here is the fiddle

Categories

Resources