We have a UIform (angular js) which has Edit button in each row. Edit button has a condition that only one row can be edited at a time. I need to insert another button at top to disable edit button in all the rows. Please assist.
Current code: btn ng-disable = disableedit ng-click form-edit > button < /btn
disableedit function disables all edit button except for current row which is being edited. Please assist what should be the code for the new EditDisable button.
As i understand you want to enable edit button only when the user is hovering at that row. Here is my attempt to achieve the same. You can use ng-mouseenter and ng-mouseout events to trigger functions.
mouseenter : The event occurs when the pointer is moved onto an element.
mouseout : The event occurs when a user moves the mouse pointer out of an element, or out of one of its children
<div ng-app="myApp" ng-controller="MainCtrl">
<div class="mb-20" ng-repeat="row in rows" ng-mouseenter="rowid=$index+1">
<span>{{$index+1}}</span>
<span>{{row.value}}</span>
<span>
<button ng-disabled="rowid!=$index+1" ng-mouseout="rowid=0">edit</button>
</span>
</div>
</div>
So , basically check if your row_id is equal to the current index enable the button else let it be disabled.
Here's the jsfiddle link : http://jsfiddle.net/khushboo097/ohvqjdye/
Related
We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.
Here is a concentrated bit from the template:
<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
<uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
<uib-tab-heading>Heading Here</uib-tab-heading>
<div>
<!-- some other stuff here -->
<div>
<label>Label Here</label>
<br />
<div ng-repeat="input in inputTypes">
<input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
<label>{{input.localizedName | translate}}</label>
</div>
</div>
<!-- More stuff here-->
</div>
</uib-tab>
</uib-tabset>
I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.
Here's a list of things I've looked at to try and resolve this issue:
AngularJS - ng-repeat multiple radio button groups, values to array
AngularJS - Using ng-repeat to create sets of radio inputs
AngularJs: Binding ng-model to a list of radio buttons
AngularJS multiple radio options
Selected value in radio button group not retained in angularjs
How can I get the selected values of several radio buttons to be bound to an object (model)?
If I understand you correctly, you try to set multiple selection instead of single selection, do you?
Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle, tool-tip doesn't hide on mouseout and few other hyperlinks and mouse events stop working.
I have a set of contacts displayed in a list on an overlay, each of it with a bootstrap delete icon besides it which displays a tool-tip on mouse hover. for the delete icons, neither are we using button, nor anchor tag a, we are using bootstrap icons which act as the links for click event. Please suggest how to disable the 2nd click for them. Fast clicking the delete icon twice, disrupts the 1st delete cycle, causing other hyperlinks like delete icons and tool-tips on other contact records to be disabled and all other mouse events to be disabled, freezes the delete icon (which is no more visible on mouseover) and open overlay hyperlink icon.
Tried several options like:
Explicitly deactivating mouse events on row after 1st click of delete icon using angular.element('.deleteIconClass').css('pointer-events','none');
and activating mouse events on row after success or failure of delete AJAX call using angular.element('.deleteConfigIcon').css('pointer-events','auto'); respectively.
Calling angular UI grid refresh on overlay so as to hide the retained tool-tip and show back the delete icons on hover over delete icons on each row.
Explicitly calling mouseout or mouseleave and mouseover or mouseenter events to respectively hide and show the tool-tips on delete icons of each row.
None of the above are working satisfactorily. Am I missing something in the design or coding? Kindly let me know if any other information is required as it is an already existing code. Thanks.
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle
Didn't quiet catch the rest if your question but If you're trying to prevent the an action from perormining more than one, you need to disable it on click.
<button type="button" ng-click="clicked()" ng-disabled="hasClicked">click me</button>
$scope.clicked = function(){
$scope.hasClicked = true;
someLongTask()
.finally(function(){
$scope.hasClicked = false;
});
}
you can use the same to disable all other buttons.
If you're using a with href you may want to refer to this directive to prevent click on an href that is disabled (eatClickIf).
https://gist.github.com/bcabanes/677305a013660ae7d55e
I have a list of radio buttons using ng-repeat.
When I initially load the page and select on the last radio button, the button on it's side gets selected.
This only happens for the first time, i.e. if I click on the last button a second time, it is selected correctly.
<input type="radio" name="rb" value="{{rbCollection.name}}" data-ng-click="open(name)" data-ng-model="Ctrl.selection">
Check this so.
The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.
I have added a custom directive in Angular JS. I have added one page in which I have 4 div tag. These 4 div tag are not displayed at once, but they are getting displayed in tabs, so on click of particular tab respective div gets displayed.
But when the page loads all div tag are loaded so directive is called when page is loaded. But what I want to achieve is when the div tag gets visible (on click of tab) it should execute that directive.
Is there a way to achieve this ?
Thanks.
-- Update - 1
let me explain my problem with more details ..
I am displaying tabs using boot-strap data-toggle="tab", so when I select particular tab it displays that tab content.. but on click of tab bootstrap is showing / hiding tabs by applying css.
<a href="!#tab_1" data-toggle="tab">
<a href="!#tab_2" data-toggle="tab">
<a href="!#tab_3" data-toggle="tab">
<div class="tab-pane fade" id="tab_1">
... some content
</div>
<div class="tab-pane fade" id="tab_2">
<table>
<tr ng-repeat="user in userList">
<td>{{user.name}}</td>
<td>{{user.contact}}</td>
View
Edit
</tr>
</table>
</div>
<div class="tab-pane fade" id="tab_3">
... some content
</div>
<new-user-modal username="name"></new-user-modal>
so, now when i load page by default tab_1 is selected / active, but other tabs are already loaded but are hidden. Here <new-user-modal> is a custom directive, which points to a template using templateUrl ../../newUserTemplate.html, which has div with id new_user_modal.
So when I select tab_2, i see list of users, all user row will have View action, and when i click on View action, it displays pop-up using newUserTemplate.html template. I have implemented a custom directive to display all fields in form as read-only, so when user clicks on View action it should display all fields in read only mode.
template (../../newUserTemplate.html) div with id new_user_modal has this custom directive read-only added to it, so when i load page first time when by default tab_1 is selected that time its calling read-only custom directive.
But I want it to be called when action is clicked, so based on it i can open modal either in read-only or edit mode.
let me know if you need any other details..
-- Update-2
basically I have created two directives one is new-user-modal and other is read-only.
First directive is to load user details in a modal(popup) which as i explained is getting generated using data-toggler=modal. This directive new-user-modal has template which is a form with user related fields, so when user clicks on any user records, this modal will be displayed with user information..
new-user-modal directive is pointing to template file ../newUserTemplate.html, where i have all user fields. In this template i have added my another custom directive read-only, so if user clicks on view user action, it will open this modal in read only view means all form fields will be read only, and if user clicks on edit user action, same modal will open in edit mode.
But, as this modal is getting generated using bootstrap, this modal is already loaded when the page is loaded first time, but its hidden. So directive is getting called when page is loaded not when modal is shown ..
You could use ng-if for directives and check if the current tab is open. ng-if recompiles the directive from scratch only when the value is true, or in your case
Something like this:
<tabs>
<pane title="Tab1">
<directive ng-if="tab1.active"> </directive>
</pane>
<pane title="Tab2">
<directive ng-if="tab2.active"> </directive>
</pane>
</tabs>
Is this something you want? There is also another way using $compile but it's not so correct.
I am using angular button in a ng-grid. I need to know how can i identity which button was clicked from within the grid.
I guess part of the complexity is that the button is clicked before the row is selected (Just my analysis,probably wont help with the solution :)
A snap shot of how the grid looks
A plunker illustrating the problem here
I have been able to find out how to resolve my question,basically pass in "row" as an argument on your function for ng-click. ng-click="save(row)"
Before
.. ng-click="edit(selectedItem)" >Edit</button> '
After
.. ng-click="edit(row)" >Edit</button> '
I have updated the plunker here to reflect the same
row.entity will give me the entity bound to this row of the grid
#Shai Aharoni You can prevent the row from being selected by passing $event as the first argument to the click handler:
.. ng-click="edit($event, row)">Edit</button>
and then calling stopPropagation() on the event from inside the handler.
$scope.edit = function(event, row) { event.stopPropagation(); }