Angular2 dynamic buttons where only one can be selected at a time - javascript

I am trying to create the following UI/UX buttons:
.. [2015] [2016] [2017]
Where the current year (in the time of writing, 2017) is 'selected' by default, however, when the user clicks '2015', '2017' and '2016' should be deselected (These buttons are 'mutually exclusive')
The buttons are being generated from an external data source that provides me data with years:
<button *ngFor="let year of styles.years" type="button" name="button" class="btn btn-default" id="{{year.year}}">
{{year.year}}
</button>
How can I create a system of buttons where one button is 'auto-selected', and when 'other' button is selected, it deselects the button that's actively selected, and sets the now clicked button to 'selected'?

Set a property in the component activeYear and control it by binding logic to the (click) of a button
<button *ngFor="let year of styles.years"
[ngClass]="{ active: activeYear === year }"
(click)="activeYear = year.year"
type="button" name="button" class="btn btn-default" id="{{year.year}}">
{{year.year}}
</button>
Heres a working Plunker demonstrating this

For those who would like to use multiple classes, like in my case:
Add a comma, and add a new style:condition.
[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"
Hope this helps others as well

Related

Send ng-repeat values that are selected (checkbox is true) into a javascript function as an array parameter

I want to add a Cancel button that will update the status from open to cancelled for all the selected checkboxes.
The cancel button should change the status to Cancelled.
Below is the code for the cancel button.
<div>
<button type="button" class="btn btn-danger btn-lg text-left" id="btnCancelSelectedOrderLines" name="btnCancelSelectedOrderLines" ng-click="dsoedit.OnCancelSelectedOrderLines()">Cancel Lines</button>
</div>
The checkboxes are displayed using ng-repeat.
<tr ng-repeat="o in dsoedit.OrdLines">
<td>
<md-checkbox aria-label="Select Order Line" ng-model="o.IsSelected" ng-change="selectEntity()"></md-checkbox>
</td>
<td>
<H5 class="btn-h-spacer">{{o.LineNbr}}</H5>
</td>
<td>
<H5 class="btn-h-spacer">{{o.Status}}</H5>
</td>
…
My goal here is to cancel the orders where the checkboxes are selected. I'm trying to send the selected values to the ng-click function OnCancelSelectedOrderLines as an array parameter. Is there a way to send the o.LineNbr values as an array for the selected checkboxes to the OnCancelSelectedOrderLines as a parameter?
(something like this OnCancelSelectedOrderLines(o.LineNbr))
I was able to achieve my solution by passing in the entire ng-model
dsoedit.OrdLines as an parameter.
Updated by ng-click Cancel button to
ng-click="dsoedit.OnCancelSelectedOrderLines(dsoedit.OrdLines)"
And in my javascript function, I used filter to select the selected checkboxes.
var selectedOrderLines = OrdLines.filter(ordLine => ordLine.IsSelected === true);

How to click on button by onclick method?

I am use puppeteer for get data from page. But all button on webpage have same type and class - only difference is onclick attribute. I need click on different button to open tray with information I need.
For example:
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10002)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10003)">More</button>
> <button type="button" class="btn btn-primary"
> onclick="OpenTray(10004)">More</button>
So how I can tell puppeteer only click on button with onclick attribute for example OpenTray(10002)
You should be able to achieve this with a slightly more complex selector:
const button = await page.waitForSelector(`button[onclick="OpenTray(10004)"]`)
There are a lot of attribute selectors you can use to match the values of the attributes e.g. contains, starts with, ends with.

how to disable angular2-ladda from HTML and prevent class overwriting by ladda

I'm just beginner to Angular and I have got the following query.
I've used angular2-ladda for button loading, I want to keep button disabled when view loads, what I did is as follow,
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" disabled="disabled">Add</button>
about the first question I've used attribute disabled to disable button but it is not working, and the second it overwrites class btn btn-success.
for solution what i did is, I've disabled button from JS and the btn btn-success style applied by css.
is there any way to solve this, if yes please let me know.
To disable the button use [disabled] property.
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" [disabled]="disabled">Add</button>

html5 jquery - Multiple buttons feed different values into field in modal

I'm currently trying to work out how to use jQuery to use multiple buttons to feed different values into a field in a form that is located in a shared modal.
At the moment I have three buttons labelled "Add Notes", "Add Visit" and "Make Call", each triggering the same modal, like below for example:
<button id="AddVisitButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#AddNotesModal">
<i class="fa fa-car"></i> Add Visit
</button>
<button id="MakeCallButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#AddNotesModal">
<i class="fa fa-phone"></i> Make Call
</button>
The plan is to have each button which, when clicked, will feed a number into the Category field in the modal (a number that is tied to a specific CategoryID on a SQL database) which is currently called using recordsets in a Select dropdown:
<select name="Category" required class="form-control" id="Category">
<option value="">Select...</option>
<option value="<%=(rsNtsC.Fields.Item("NotesCategoryID").Value)%>">
<%=(rsNtsC.Fields.Item("NotesCategory").Value)%>
</option>
</select>
Does anyone have any suggestions or ideas, as having multiple modals is very costly in speed and rather untidy, especially when they all do the same function but just apply a different category of note.
Many thanks.
EDIT: I must also confirm that I am stuck using Classic ASP for this system.
EDIT 2: From what I have worked out on my own, I need whatever jQuery spits out to go into this section:
<option value="**<%=(rsNtsC.Fields.Item("NotesCategoryID").Value)%>**">
Unfortunately this was not solved and we went with a different method that triggers through the button sending a value then hiding the category all together.

Validate btn-radio button on click

I am using Angular UI btn-radio directive to show 2 different buttons:
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode1'">Mode1</label>
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode2'">Mode2</label>
And this works well, however I want to introduce some kind of validation so that when one of these buttons are clicked they became active only if validation is passed. For example, If I click on Mode2, that button should be active only if some condition is satisfied. The problem is that by default active class is added on every click, and btn-radio directive stores the state active. Is there a way to get around this ?
You can look at my answer in this plunker
I just removed the "ng-model",made my own condition to add "active" on the button and created a custom click that will check the condition before switching.
<div class="btn-group">
<label class="btn btn-default" ng-class="{active:mode==='Mode1'}" ng-click="activateMode('Mode1')">Mode1</label>
<label class="btn btn-default" ng-class="{active:mode==='Mode2'}" ng-click="activateMode('Mode2')">Mode2</label>
</div>
And the activateMode function :
$scope.activateMode = function(modeName){
//I don't allow to switch mode if the checkbox isn't checked.
if($scope.changeMode){
$scope.mode = modeName;
}
}
Hope it helped.

Categories