I have a column of checkboxes on a b-table but I only want the user to be able to select one. Selecting another should uncheck the first option.
I tried to set selected = [] and refresh the table upon selection of a second checkbox but while the selected object ends up with the correct row data, the checkbox still appears on the table.
I also tried to call this.$refs.myTable.clearSelected() but that did not seem to have any effect beyond setting my v-model to null.
Here is the table code:
<b-table
no-provider-filtering
ref="groupTable"
show-empty
stacked="md"
:items="ParamProvider"
:fields="fields"
striped
outlined
hover
class="bg-light"
:current-page="current_page"
:per-page="per_page"
:filter="filter"
:filter-included-fields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
#filtered="onFiltered"
>
<template v-slot:cell(selected)="row">
<b-form-group>
<input type="checkbox" #click.stop="addToSelected(row.item, row.index)"/>
</b-form-group>
</template>
<template v-slot:cell(actions)="data">
<b-button size="sm" variant="danger" b-tooltip title="Delete"
#click.stop="removeItem(data.item, data.index)"><i
class="fa fa-trash"></i></b-button>
</template>
</b-table>
Related
I have an input field where a typeahead popup comes on searching for something. The screen reader is unable to read the values of suggestions in the popup.
I am maintaining the focus using $ActiveIndex variable. I am able to navigate the list using only the arrow keys, the screen reader just reads the input text when navigating the popup list and not the actual values in the suggestions
The HTML code is something like this:
<input type="text"
class="search"
title="Search User"
ng-model="vm.SearchText"
ng-model-options="{ debounce: 300 }"
aria-label="{{ placeholder }}"
ng-required="requiredattr" />
<ul class="ui list menu typeahead popup-layer vertical" ng-show="vm.MenuShown" ng-mousedown="vm.RetainFocus()">
<li class="item"
ng-class="{ active: $index == vm.ActiveIndex }"
ng-click="vm.Add(match)"
ng-repeat="match in vm.Matches track by $index">
<div class="header">
<i class="ban icon" ng-if="match.Deleted"></i>
<span ng-bind-html="match.DisplayName"></span> <!-- I want this DisplayName to be read -->
</div>
</li>
</ul>
The UI looks like this
The screen reader is just reading "suh" everytime I navigate the results with arrow keys.
Things I have tried:
Adding aria-label attribute to list item - Didn't work, I guess the element should be tab focusable for the aria label to be read out.
Adding tabindex = -1 to the list item to make it focusable but not navigable. Didn't work either.
You can use aria-active-descendant attribute and set it to the list options IDs and also use aria-owns property from the input box to refer the list items.
I need to have an overall Show/Hide click to show or hide all the detail divs of a list of "panels" of data. Also within each panel, there is a Show/Hide click to individually show or hide that div of data.
I think that if the overall show/hide is clicked that the individual click values should be set equal to overall value when clicked. That way if the individual ones are changed, they are all set to show or hide when the main one is clicked.
This is how I tried to do that:
<div>- Hide All Details / + Show All</div>
<div class="tender-list" ng-repeat="row in tenders" ng-include="'tender/tender_panel.html'"></div>
Where the hide/show part of tender_panel.html is here:
<div>- Hide Details</div>
<div class="tender-details" ng-hide="hideDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
There is another table above the tender-bottom-table. Plus a another table after.
What is happening is that it works fine when initially loaded. The Hide All/Show All works. Then I click on the individual show/hides and they work. But then the All Show/All Hide no longer works and I don't see how clicking the individual links breaks things.
This app is Symfony2 with Angular and Bootstrap.
Any help would be greatly appreciated.
one thing you could try is to have a property flag in each tenders item that sets if it's shown/hidden and show the individual item based on if hideAllDetails + their flag is true:
<div>- <a href='#' ng-click="hideAllDetails = ! hideAllDetails;">Hide All
Details / + Show All</a></div>
<div class="tender-list" ng-repeat="row in tenders" ng-
include="'tender/tender_panel.html'"></div>
tender_panel.html:
<div>- <a href='#' ng-click="row.hideDetails = ! row.hideDetails">Hide
Details</a></div>
<div class="tender-details" ng-hide="hideDetails || hideAllDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
I'm trying to use ng-if to display a button based on filters being present on screen. I'm using md-chips to show filters in categories.
HTML:
<div ng-repeat="filter in sc.filters track by $index">
<md-chips ng-model="filter.value" ng-if="sc.isArray(filter.value)" md-on-remove="sc.filter()"></md-chips>
</div>
<button ng-if="$first" ng-click="sc.newSearch()">clear filters</button>
I track the index and try to add the button if first item was present. It doesn't show the button at all. Any help appreciated.
$first should be used within an ng-repeat statement. In this case you don't want to use $first though.
If you want to add the button if the first item is present, why not just do something like this:
<button ng-if="sc.filters.length" ng-click="sc.newSearch()">clear filters</button>
I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.
Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).
Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="btn{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
I have 2 tables, one displayed, the other one hidden:
<div ng-show="displayed('active')" ng-controller="DataTablesCtrlA as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
<div ng-show="displayed('retired')" ng-controller="DataTablesCtrlB as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
I have a toggle which controls the visibility of the tables, when button A is clicked, then table A is displayed and table B get hidden and vice-versa.
The issue I am facing is that when table B get displayed, the table header is not properly expanded. This is known and well explained on DataTables documention here.
Below a screenshot of the issue:
So I am using columns.adjust() like so:
In the View template:
<div class="btn-group">
<button ng-click="setDisplayed('active')"
ng-class="{active: displayed('active')}" class="btn btn-default">Active</button>
<button id="btn-retired" ng-click="setDisplayed('retired')"
ng-class="{active: displayed('retired')}" class="btn btn-default">Retired</button>
</div>
In the View controller:
//...
this.setDisplayed = function(toDisplay){
this.displayed = toDisplay;
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
};
//...
The issue I am facing is that table B is still hidden when setDisplayed get called and the header stay "unexpanded".
Is there a clean way to solve this problem ?
One solution I have in mind would be to listen for changes on the table display style attribute and call colums.adjust() in the event handler. But this would require to change the directive link property.