angucomplete-alt unable to type in textbox - angularjs

Simple problem here - but cant seem to find answer. I have added the angucomplete-alt to my project - I believe that I have added it all correctly - meaning, registering it and having the js file available when the page loads. But for some reason when I click on the input and start to type - nothing happens. I am unable to type in the textbox/input. below is my code for the control. - im double checking how things are wired up on the back end. - thanks in advance.
and this exact code works in another project - configured differently - but the markup for the control is the same
<angucomplete-alt id="searchGroupsAutoComplete"
placeholder="{{searchPlaceholder}}"
pause="400"
text-searching="{{searchingText}}"
selected-object="selectedAnObjectFn"
remote-url="/api/search/SearchByQueryStrings"
remote-url-request-formatter="formatSearchDataFn"
remote-url-response-formatter="formatReturnDataFn"
remote-url-data-field="Content"
title-field="Name"
description-field="EntityType"
image-field="ThumbnailUrl"
minlength="1" />

Remove maxlength="{{maxlength}}" of INPUT tag in $templateCache.put(TEMPLATE_URL,..... (angucomplete-alt.js)
so it worked, but I don't known why.

Related

DHX Spreadsheet - Unable to select from Column A to D

Tried creating DHX spreadsheet into my react application, followed the website guide https://dhtmlx.com/docs/products/dhtmlxSpreadsheet-for-React/#how-it-works.
However when the spreadsheet is rendered out in my application, i notice that no matter what i do i can't select the Column A to D.
Have anyone faced this issue as i did?
https://gitlab.com/patrickklze/trying_dhx_spreadsheet.git
Screenshot of the issue
Found and fix the issue.
Somehow it inherits the main css file and text align everything to middle which causes the columns to have bugs.
Add a inline styling on the component tag in your app.js for example:
<span style={{textAlign:"left"}}>
<SpreadsheetComponent />
</span>
Would solve the issue.

Angular DataBinding is not working in xmd-step label

I am facing a peculiar problem! We are using xmd-wizard for the HTML page and in controller we are doing some operations. We are also translating the label field according to the configured language. So the code is -
<xmd-wizard active-step="currentStep" on-change="stepChanged()" on-save="savePath()">
<xmd-step label="{{translateData.GENERAL_INFORMATION}}" xmd-required="true">
But the DataBinding is not working over here! It's working in other place in the same HTML, for example -
<md-input-container flex="50" >
<label class="crudLabel">{{translateData.PATH}} {{translateData.NAME}}</label>
</md-input-container>
But only within the label element of xmd-step, the DataBinding is not working!!!
Has anyone faced this issue?
Thanks
It was a known defect with the xmdWizard. I contacted the github owner at github and he has provided me the fix. So we should use the latest build of xmdWizard.
Hence I am closing this issue.
Thanks.

AngularJs multiple select shows unresolved list instead of contents in IE

I am using angularJs to bind a list of employees into a mult-select tag. Below is my code:
<select class="form-control" ng-model="event.attendees"
ng-options="c.Email as c.FullName for c in employees" id="eEmployees" multiple style="height:315px !important; -webkit-appearance:listbox !important;">
</select>
The result displayed correctly in Chrome and Firefox, but in IE it shows a list of {{c.FullName}}, instead of the real names. I tried to right-click to view the source in IE (and also IE inspector, F12), but in the source, the employee names display correctly.
Have anyone here ever ran into this issue before? I really have no sense why this happened. I placed my multiple select tag in a modal-dialog, does that matter?
I figured it out by added $scope.$apply() after angular service pulled the list data. It needs a little delay before binding it. But I still don't know why this situation only happened in IE though.

Add input in Angular bootstrap confirm module

I am trying to use Angular Bootstrap Confirm by Matt.
In his demo (click here), it is mentioned that html can be used in the message. His code:
Are you really <b>sure</b> you want to do this?
I changed that to
Are you really <b>sure</b><br> you want to do this?
and it still worked. But if I try to add any complex element like input or button, it does not work.
Enter <b>Yes</b><br> <input type='text'> <br>and click 'Yes'
Is there a way to add input or textarea to the message?
You would have to fork their code, based on the source, it is using a class, so you could not do this through the interface.
https://github.com/mattlewis92/angular-bootstrap-confirm/blob/master/src/angular-bootstrap-confirm.html

Odd issue with ng-show always evaluating to true

I had a bit of code in my view that would only show up when a particular value was true. Lt looked like this:
button type="button" ng-click="attachBarCode('enter')" ng-show="barcodeAllowed.status">Foo</button>
This was working until recently. My controller had some logic where, based on Ajax data, it would set $scope.barcodeAllowed.status to true. All of a sudden though, the button was always showing up. To help debug the issue, I added some additional tests to my view:
first test, <span ng-show="!barcodeAllowed.status">DONT SHOW</span><br/>
second test, <span ng-show="barcodeAllowed.status">DONT SHOW</span><br/>
test -{{barcodeAllowed.status}}-end -{{!barcodeAllowed.status}}- -{{barcodeAllowed | json}}-<br/>
test if <span ng-if="barcodeAllowed.status"> if was true</span><p>
Here is where things got crazy. Both "DONT SHOWS" rendered in my view, even though it seems as if that would be impossible. When I output the values in the third line, I saw false and true, as I expected.
Finally - the ng-if? It worked perfectly! The value did not show up.
I've heard folks mention that ngShow can have scope issues inside a ngif, but my code isn't inside an ngif.
So, you won't believe what it was. I was using a Content Security policy in my app and on a whim, I disabled it. As soon as I did, it began working. I played around a bit and discovered that I needed to add 'unsafe-eval' to the to the script-src area of my CSP in order for Angular to be able to apply the styles.
The Ng-show/Ng-hide directives needs a css-class to show/hide, since it just adds a class to your element when the scope-variable is truthy/falsy.
Ref: https://docs.angularjs.org/api/ng/directive/ngShow

Resources