Develop Reference

Angular JS dynamically set tabindex attribute

I'm fairly new to Angular, and I'm working on a simple flashcard website. Here's my current relevant HTML:
<div id="flashcards" class="row">
<div class="flashcard col-sm-6 col-md-4 col-lg-3"
ng-repeat="card in cards">
<div class="flashcard-inside"
ng-class="{'flipped' : card.flipped}">
<div class="flashcard-btns">
<button ng-click="flip(card)" class="btn btn-secondary">
<i class="fas fa-sync-alt"></i>
</button>
<button ng-click="remove(card)" class="btn btn-danger">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="flashcard-front">
<textarea ng-model="card.front"
class="form-control
flashcard-content"
ng-tabindex="{-1 : card.flipped}">
</textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back"
class="form-control flashcard-content"
tabindex="card.flipped ? 0 : -1">
</textarea>
</div>
</div>
</div>
</div>
I'm making a flashcard for each card in cards.
My remove and flip functions are fairly simple:
$scope.flip = (card) =>
card.flipped = !card.flipped;
$scope.remove = (card)=>
$scope.cards = $scope.cards.filter(obj=> obj.front!=card.front || obj.back!=card.back);
As you can see above, I've tried ng-tabindex="{-1 : card.flipped}" and I've tried tabindex="card.flipped ? 0 : -1" and several other combinations with no luck. I was hoping someone more experienced in Angular could point me in the right direction. It seems my problems would be solved if I could get a hold of the DOM element from the card variable in my flip scrips, and set its tabindex attribute with jQuery, however I can't seem to access the element for the textarea (which would be nice because I'd also like to focus it later).

There is no need to use ng-attr-tabindex, it can simply be done with interpolation:
<div class="flashcard-front">
<textarea ng-model="card.front" class="form-control flashcard-content"
tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back" class="form-control flashcard-content"
tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>
The problem with the code in the question is that the interpolation needs double curly brackets ({{ }}).
The ng-attr-* syntax is only necessary in exotic situations.
For more information, see
AngularJS Developer Guide - Interpolation
AngularJS Developer Guide - ngAttr for binding to arbitrary attributes

Credit to #Phix for the suggestion to use ng-attr.
The relevant part is ng-attr-tabindex="{{card.flipped ? -1 : 0}}" and the same but with !card.flipped instead of card.flipped.
My full code is:
<div class="flashcard-front">
<textarea ng-model="card.front" class="form-control flashcard-content"
ng-attr-tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
<textarea ng-model="card.back" class="form-control flashcard-content"
ng-attr-tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>
Angular Docs

append() fail to make boostrap component works

This drive me crazy, i've this simple html bootstrap-gentelella template that works almost in every page of the site that im developing, the html is so simple:
(this code make the part in the class "x_content" visible or not visible by clicking the "collapse-link" class in the "a" tag)
<div class="x_panel">
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link freccia_feed">Replies
<i class="fa fa-chevron-up"></i>
</a>
</li>
</ul>
<div class="x_content" style="display: none;">
<div class="input-group col-md-12 col-sm-12 col-xs-12">
<input data-role="tagsinput" id="risposta_'+j+'_D_'+element+'" class="form-control risposta_domanda_'+element+'" name="reply" value="" placeholder="Insert one solution" type="text">
<span class="input-group-btn">
<button id="elimina_risp_'+j+'_D_'+element+'" class="btn btn-danger glyphicon glyphicon-trash" > </button>
</span>
</div>
</div>
</div>
be carefull that the part like id="risposta_'+j+'_D_'+element+'" have no sense in this static part, and rendered as is it, just for example, I use that in the jQuery function that fail to make it works!
here:
$("#domanda_"+element).append(
'<div class="x_panel">'+
'<ul class="nav navbar-right panel_toolbox">'+
'<li>'+
'<a class="collapse-link freccia_feed" >Replies'+
'<i class="fa fa-chevron-up"></i>'+
'</a></li></ul>'+
'<div class="x_content" style="display: none;">'+
'<div class="input-group col-md-12 col-sm-12 col-xs-12">'+
'<input data-role="tagsinput" id="risposta_'+j+'_D_'+element+'" class="form-control risposta_domanda_'+element+'" name="reply"'+
'value="" placeholder="Insert one solution" type="text">'+
'<span class="input-group-btn"><button id="elimina_risp_'+j+'_D_'+element+'" class="btn btn-danger glyphicon glyphicon-trash" >'+
'</button></span>'+
'</div></div></div>');
I've tried many options to make this string works inside append() and the only one that seems working it to wrap the whole string with single ' using double " for ids class etc. and then inject javascript variable with single ' and +. Same thing for new line.
I even try to escape the whole string with online escape tools like https://www.freeformatter.com/javascript-escape.html
but still the same result, the component not works if is appended!

the problem is in the "inizialization" of the class ".collapse-link" by gentelella js.
So i move the function under my "div" generation function's.
I even add a "unbind()" func to resolve the problem that "inizialization" can toggle even the allready rendered div making them open anc closing several time...
thats the code if someone can find it usefull
cheers
$(".collapse-link").unbind("click");
$(".collapse-link").on("click", function() {
var a = $(this).closest(".x_panel")
, b = $(this).find("i")
, c = a.find(".x_content");
a.attr("style") ? c.slideToggle(200, function() {
a.removeAttr("style")
}) : (c.slideToggle(200),
a.css("height", "auto")),
b.toggleClass("fa-chevron-up fa-chevron-down")
});

WebDriver: Select a value from the drop down by using Javascript executor

Application that I am working on has drop downs implemented using AngularJS. The values load on the click of the drop down field and when user selects the element, the value is stored in the drop down field.
What I have tried to make it work?
Wait for the object to be visible/clickable before clicking on the value to be selected
Move to the element before clicking on it (using action class)
Get the list of the elements, iterate and select the value
I am able to currently make this work in Firefox and Chrome using the following code. This works fine when I am running the test scripts sequentailly but fails to work when I run tests in parallel..
WebDriver driver = getDriver();
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
Is there a better solution to do this??
I am not good at java scripts, but I believe this is the js that is called when user selects the value. Is there a way to find out what is the return value this function is expecting so that we can return the value directly to the browser using JavaScriptExecutor..
Any direction on this will be greatly appreciated.. I have been stuck in this for quite few days now.. Thank you...!
return function(i, o, a, s, l) {
var u = a.groupBy,
c = a.groupFilter;
if (s.parseRepeatAttr(a.repeat, u, c), s.disableChoiceExpression = a.uiDisableChoice, s.onHighlightCallback = a.onHighlight, u) {
var d = o.querySelectorAll(".ui-select-choices-group");
if (1 !== d.length) throw n("rows", "Expected 1 .ui-select-choices-group but got '{0}'.", d.length);
d.attr("ng-repeat", t.getGroupNgRepeatExpression())
}
var f = o.querySelectorAll(".ui-select-choices-row");
if (1 !== f.length) throw n("rows", "Expected 1 .ui-select-choices-row but got '{0}'.", f.length);
f.attr("ng-repeat", t.getNgRepeatExpression(s.parserResult.itemName, "$select.items", s.parserResult.trackByExp, u)).attr("ng-if", "$select.open").attr("ng-mouseenter", "$select.setActiveItem(" + s.parserResult.itemName + ")").attr("ng-click", "$select.select(" + s.parserResult.itemName + ",false,$event)");
var p = o.querySelectorAll(".ui-select-choices-row-inner");
if (1 !== p.length) throw n("rows", "Expected 1 .ui-select-choices-row-inner but got '{0}'.", p.length);
p.attr("uis-transclude-append", ""), r(o, l)(i), i.$watch("$select.search", function(e) {
e && !s.open && s.multiple && s.activate(!1, !0), s.activeIndex = s.tagging.isActivated ? -1 : 0, s.refresh(a.refresh)
}), a.$observe("refreshDelay", function() {
var t = i.$eval(a.refreshDelay);
s.refreshDelay = void 0 !== t ? t : e.refreshDelay
})
}
Below is the html of the drop down. DIV is loaded only when user clicks on the drop down arrow. I want to select 'Value1' or 'Value2' in this.
<div class="ui-select-container ui-select-bootstrap dropdown ui-select-container ui-select-bootstrap dropdown ng-pristine ng-touched error open" ng-class="{open: $select.open}" gw-field-empty="" style="position: absolute; left: 502px; top: 1467px; width: 228.75px;" ng-change="loanBoarding.vm.loanReceipt.isOverFlow = false;loanBoarding.validateContact()" ng-disabled="shouldDisable([loanBoarding.parent.loan.isApplicationEditable && perms.editLoanBoarding && (!loanBoarding.parent.loan.currentApplicationDisposition ? true : perms.updLoan1stDisp), loanBoarding.parent.loan.isApplicationEditable && !loanBoarding.parent.loan.isLoanInUWPhase]) || (loanBoarding.isLocationDisabled || (!!loanBoarding.parent.loan.commitmentNumber && !perms.editLocationType))" ng-model="loanBoarding.vm.loanPath.locationType" name="locationType">
<div class="ui-select-match ng-hide" ng-class="{'btn-default-focus':$select.focus}" ng-disabled="$select.disabled" ng-hide="$select.open" allow-clear="false" style="">
<input class="form-control ui-select-search ng-pristine ng-untouched ng-valid" type="text" ng-show="$select.searchEnabled && $select.open" ng-model="$select.search" placeholder="" aria-activedescendant="ui-select-choices-row-11-0" aria-owns="ui-select-choices-11" aria-label="Select box" aria-expanded="true" tabindex="-1" autocomplete="off" style=""/>
<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-scope" ng-show="$select.items.length > 0" role="listbox" repeat="d.value as d in loanBoarding.locationTypes | filter: { text: $select.search }" style="opacity: 1;">
<li id="ui-select-choices-11" class="ui-select-choices-group">
<div class="divider ng-hide" ng-show="$select.isGrouped && $index > 0"/>
<div class="ui-select-choices-group-label dropdown-header ng-binding ng-hide" ng-bind="$group.name" ng-show="$select.isGrouped"/>
<!-- ngRepeat: d in $select.items -->
<!-- ngIf: $select.open -->
<div id="ui-select-choices-row-11-0" class="ui-select-choices-row ng-scope active" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style="">
<a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append="">
<span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search"/>
</a>
</div>
<!-- end ngIf: $select.open -->
<!-- end ngRepeat: d in $select.items -->
<!-- ngIf: $select.open -->
<div id="ui-select-choices-row-11-1" class="ui-select-choices-row ng-scope" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style="">
<a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append="">
<span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search">Value2</span>
</a>
</div>
<!-- end ngIf: $select.open -->
<!-- end ngRepeat: d in $select.items -->
<!-- ngIf: $select.open -->
<div id="ui-select-choices-row-11-2" class="ui-select-choices-row ng-scope" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style="">
<a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append="">
<span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search">Value3</span>
</a>
</div>
<!-- end ngIf: $select.open -->
<!-- end ngRepeat: d in $select.items -->
</li>
</ul>
<ui-select-single/>
<input id="focusser-11" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" role="button" aria-haspopup="true" aria-label="Select box focus" ng-disabled="$select.disabled" tabindex="1" disabled=""/>
</div>

Is JQuery breaking my functionality?

I am making an app, the user can either select an item or use their camera to get the qr code which translates into an item's ID.
The problem is that I think some JQuery is messing with my scope from working properly.
I have to get the QR code by listening to an innerHtml change, once it changes (DOMSubtreeModified) the following occurs.
var index = 0;
$('#result').one('DOMSubtreeModified', function(e) {
var code = "";
if (e.target.innerHTML.length > 0) {
code = e.target.innerHTML;
$scope.ToRun(code);
}
});
$scope.ToRun = function(code) {
for (i = 0; i < $scope.plantList.length; i++) {
if ($scope.plantList[i].plantcode == code) {
index = i;
break;
}
}
$scope.currentPlant = $scope.plantList[index];
$scope.plantDetails = false;
$scope.searchDetails = true;
}
For some reason the following does not have any effect on my ng-classes. As when an item is selected I hide the input dialogs, and show the result one.
$scope.plantDetails = false;
$scope.searchDetails = true;
But when a user selects the item manually it works just perfectly. (the items have an ng-click on it)
$scope.viewPlant = function(plant) {
$scope.currentPlant = plant
$scope.plantDetails = false;
$scope.searchDetails = true;
};
And the above works fine, with the ng-click. So why won't my new function that listens for an innerHtml change work?
HTML snippet
<div ng-class="{ 'hidden': searchDetails }">
<!-- CHOOSE INPUT TYPE -->
<div class="form-group" style="margin-bottom:0px">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
</div>
</div>
</div>
<br />
<!-- QR CODE INPUT -->
<div ng-class="{ 'hidden': qr }">
<img id="blah" src="./images/placeholder.png" />
<span class="btn btn-default btn-file">
<i class="glyphicon glyphicon-camera"></i>
<input type="file" onchange="readURL(this);handleFiles(this.files)">
</span>
<div id="result">xxxxxx</div>
<canvas id="qr-canvas" width="800" height="600"></canvas>
</div>
<!-- MANUAL SELECTION INPUT -->
<div ng-class="{ 'hidden': digits }">
<input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
<div style="overflow: auto; max-height:250px">
<table class="table table-striped" style="background-color:lightblue">
<tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
<th>{{plant.name}}</th>
<th>{{plant.plantcode}}</th>
</tr>
</table>
</div>
</div>
<div>
</div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
// results - this should appear when one of the above is entered.
// works for manual selection, but not qr code
</div>
Just confused on why my QR input will not fire off the change-class options to hide the searchDetails div and show the plantDetails div
EDIT: Doing a small test, it seems that my class variables are indeed not updating at all. I just put the values at the bottom of my page and they do not update when hitting the block of:
$scope.plantDetails = false;
$scope.searchDetails = true;

You need to let Angular know about the change. Add this at the end of your method and let me know if it works.
$scope.$apply();

Angularjs issue with ng-click on mobile

i've got a big performance issue.
I'm in a ng-repeat block (and i'm using track by id to improve performances).
In this block i'm generating the following dom:
1)button1A button1B
2)button2A button2B
3)button3A button3B
4)button4A button4B
5)button5A button5B
6)button6A button6B
There are some ng-show and ng-disabled in that page, on a variable that is set by ng-click on those buttons.
Performances are very poor.
On mobile we are using ng-mobile and\or fastclick for 300ms delay removing, but it seems that it tooks a lot of time to "update variables and the dom" after clicking on a button.
How can i improve performances?
Thanks a lot!
Edit: here is some code:
<div class="row" ng-repeat="date in dateRanges track by date.value">
<div ng-show="!date.custom" class="col-xs-14 col-sm-15 date-filter no-rel">
<div class="button-container button-radio"><button data-ng-class="{'radiob disabled': getDate() != date,'radiob active': getDate() == date}" ng-click="setDate(date)"></button></div>
<div class="button-container button-text">
<button class="select-date" ng-click="setDate(date)">{{date.title}} {{date.noDetails ? '' : date.start | date:'dd/MM/yyyy'}} {{date.noDetails ? '' : '-'}} {{date.noDetails ? '' : date.end | date:'dd/MM/yyyy'}}</button>
</div>
</div>
<div ng-if="date.custom" class="col-xs-2 col-sm-1 date-filter">
<button data-ng-class="{'radiob disabled':getDate() != date,'radiob active':getDate() == date}" ng-click="setDate(date)"></button>
</div>
<div ng-if="date.custom" class="col-xs-14 col-sm-15 date-filter no-rel">
<div class="row" data-ng-class="{'has-error': hasErrorComune && criteriRicerca_DateRange.custom}">
</div>
<div class="col-md-16 mrg-t-10 text-center">
<button id="Undo" ng-click="Undo()" class="btn btn-esci mrg-r-10">Undo</button>
<button type="submit" id="dropdownMovimentiConferma" ng-click="Operation()" data-ng-disabled="criteriRicerca_DateRange.custom && (hasErrorComune || hasErrorStart || hasErrorEnd)" class="btn btn-primary">OK</button>
</div>

You're testing on real mobile (harware) or emulator?
If on real, check task manager and cpu utilization.