Develop Reference

outside click is not working in angularjs

I have a button. If i click that button one popup will open in Navbar. I am using ui-bootstrap for this.
If I click outside the popup is not closing.
I wrote window.onclick function to achieve this. It is working.
But My problem is, If I click button popup will open. If I select any value in dropdown, on top of that one more popup will open.
So If I select any dropdwon value on the second dropdown, the first dropdown is automatically closing.
My need is, When I click button dropdown should open. and If I click outside the dropdown close.
If I select any value from dropdown, the dropdown should stable. It should not go off. Only when I click outside that time only it should go.
<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">&nbsp&nbspFilter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
<div class="dropdown-menu">
<div class="dropdown-item" ng-repeat="filter in filters">
<div>{{filter.filterObject}}</div>
</div>
</div>
</li>
window.onclick = function() {
$(".dropdown-menu").hide();
}
If I click button, the dropdown should not go.

This is how you can do, again this is not ideal way to do it, since we have little data provided by you, I can only think of this kind of fix :)
window.addEventListener("click", function(event) {
if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) {
$(".dropdown-menu").hide();
}
});
EDIT 1
Just add a parent div and keep a unique class for dropdown-parents which you don't want to close
suppose class name is dropdown-select
and then just edit the condition like this
if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) {

You should add an extension to the jquery library then add this script since you are using javascript
<script>
$( document ).ready(function() {
$(".dropdown-menu").hide();
});
</script>

How to make screenreader read the aria-label of a button while clicking

I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>

You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>

clicking on icon inside button of materialize-css react triggers onClick

Clicking on the button triggers the onClick appropriately but clicking on the icon within the button triggers the onClick as well but without the right data (item.target.className and what not)
<button id={check} onClick={this.changeTimesButton} className="waves-effect waves-light btn"><i className="material-icons">check_box</i></button>
Is there anyway to disable the icon being able to be clicked
using materialize-css in react project

if u cannot handle event.target in this.changeTimesButton(event) :
set onClick() on icon tag then prevent the default action
<button id={check} onClick={this.changeTimesButton}
className="waves-effect waves-light btn">
<i className="material-icons" onClick={(e)=>{e.preventDefault()}}>check_box</i>
</button>
UPDATE
you can use stopPropagation instead of preventDefault
for more details on stopPropagation and preventDefault see this :
What's the difference between event.stopPropagation and event.preventDefault?

Angular X-Editable Remote button?

I am using Angular X-Editable to allow users to edit list items in a ng-repeat.
I am using this approach: https://vitalets.github.io/angular-xeditable/#text-btn
However, I have been asked to modify this app so that the user can highlight a row in the repeat by clicking on it and click and edit button elsewhere that would put whichever row was selected into x-editable "edit mode".
Looking at their docs I see no method of doing this, nor the event that would put a row into edit mode. I can get the $index of the row clicked on in my ng-click handler but see no way to put that row into edit mode and capture the edits made.
My ng-repeat is like this so far, which is from the example linked above and shows a "pencil" button for editing that it. It works fine, but how to have all the items editable from one button on a toolbar or the like?
<div class="list-group-item" ng-repeat="level1 in pmt..level1 track by $index">
<button ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<span editable-text="level1.name" e-form="textBtnForm">
{{ level1.name || 'empty' }}
</span>
<i class="pull-right fa fa-angle-right fa-lg"></i>
</div>
Note: I know how to hide the buttons, or use a click on the text. The question is not eliminating he repeated buttons, but how to have one button to edit the focused row.

Make a div always on top using JavaScript

I am working on a simple HTML/JavaScript project. In this I have a main div, in this div I have another div which is not visible initially.
<div>
<div class="warning" id="time-alert" style="visibility:hidden">
<span style="font-weight:bold">your time is up To extend the time click on
extend button.
<input type="button" id="extend-btn" onclick="clickaction()" value="Extend">
</div>
<div class="create pull-right">
<button id="btn-create" type="button" class="btn btn-primary"
onClick="openmodal()">open modal</button>
</div>
</div>
When user clicks on open modal button, a Bootstrap modal pops up. Now I am making that time-alert div visible continuously on 2 minutes interval by JavaScript. When I am on home page it's working fine but if model has already opened on the screen, the alert div is not showing above the modal. Can you please tell me how can I do this with JavaScript?

Try to put the HTML of your bootstrap modal before the "time alert" div. That way, the modal box should stay behind the time alert. You may want to add a z-index to the CSS of the time alert if need be.