<li ng-repeat="chat in openedChats track by $index" ng-click="init($index,'maximize')" role="button">
<button class="minimized-chat-box" >
<label style="float:left;color:white"><strong>{{chat.NAME}}</strong></label>
<i class="fa fa-remove" style="color:white;float:right;font-size:14px;" role="button" ng-click="init($index,'close');$event.stopPropagation();">
</i>
<i class="fa fa-window-maximize" style="color:white;float:right;font-size:14px" role="button" ng-click="init($index,'maximize');$event.stopPropagation();">
</i>
</button>
</li>
This is the code I have for making the icons inside the button clickable and it works fine on chrome, It stops working on firefox, Is there a way I can modify it to work on both. I really couldnt find one way to make it work for both!
Thanks in advance. I'm new to angularjs and I'd love to use angular to do this.
try this
$scope.init = function($event,$index,'maximize'){
$event.stopPropagation();
};
then call this like
ng-click="init($event,$index,'close')
Related
I am trying to implement a "edit mode" feature.
When edit button is clicked, function backup will back up the item.
When save button is clicked, function save will save it.
But it does not work for Recover
<a><i class="fa fa-lg" ng-click="item.editable? item.enable = !item.enable:''" ng-class="item.enable? 'fa-toggle-on text-success': 'fa-toggle-off text-danger'"></i></a>
<a ng-if="!item.editable"><i class="fa fa-lg fa-pencil-square text-primary" ng-click="backup(item)"></i></a>
<a ng-if="item.editable"><i class="fa fa-lg fa-check-square text-primary" ng-click="save(item)"></i></a>
<a ng-if="item.editable"><i class="fa fa-lg fa-reply text-danger" ng-click="recover(item)"></i></a>
Plunker
Please look at my Edited plunker .. I've added an angular.extend(item, backup_item) to properly update the item object with it's backup.
Hope this helps
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>
We've got the following HTML:
<div class="btn-group search-dropdown" dropdown is-open="gender.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{sex_temp=='F'?'Female':'Male'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-class="{'dropdown-selected':sex_temp=='F'}">
<a ng-click="sex_temp='F'">Female</a>
</li>
<li ng-class="{'dropdown-selected':sex_temp=='M'}">
<a ng-click="sex_temp='M'">Male</a>
</li>
</ul>
</div>
In the console, we're getting the following error:
Error: setIsOpen is not a function #http://127.0.0.1/lib/bootstrap-ui/ui-bootstrap-tpls-0.12.1.js:1734:5
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12406:23
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1 #debugger eval code:1:1
consoleLog/<#http://127.0.0.1/lib/AngularJS/angular.js:10062:18
$ExceptionHandlerProvider/this.$get</<#http://127.0.0.1/lib/AngularJS/angular.js:7363:7
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12426:19
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1
We're using ui-bootstrap-tpls-0.12.1.js
I have tried adding $scope.gender={isopen:false} but that didn't help.
Any idea on what might be the problem here? The dropdown is working perfectly. I just want to get rid of these errors in the console.
I had the same issue, I believe it has something to do with the overlap of bootstrap's drop-down. Try removing the "dropdown-toggle" class from your button.
In my case it helped to simply remove the is-open attribute.
This is 2 years later, but updating your ui-bootstrap would fix this problem if you're using an older version (example 0.13 instead of 2.5)
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)
Working version Angular 1.0.7 plunkr
Not working version Angular 1.2.1 plunkr
In angular 1.0.7, the following ngInclude worked fine:
<li class="dropdown" id="header_notification_bar" data-ng-include="" src="'notifications.tpl.html'" data-ng-controller="NotificationsCtrl"></li>
notifications.tp.html looks like this:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-warning-sign"></i>
<span class="badge">{{notifications.length}}</span>
</a>
<ul class="dropdown-menu extended notification">
<li>
<p>You have {{notifications.length}} new notifications</p>
</li>
<li>
<ul class="dropdown-menu-list scroller" scroller style="height: 250px">
<li data-ng-repeat="n in notifications" >
<a href="#">
<span class="label label-success"><i class="icon-plus"></i></span>
{{n.summary}}
<span class="time">{{n.time}}</span>
</a>
</li>
</ul>
</li>
<li class="external" >
See all notifications <i class="m-icon-swapright"></i>
</li>
</ul>
in Angular 1.2.1, the template gets loaded but it seems the view is not bound to the controller/scope.
if you run the 2 plunkrs above and click the exclamation point, you will see that only Angular 1.0.7 shows notification items.
I have read the "Migrating from 1.0 to 1.2" documentation found here but do not see anything relevant. Perhaps I am missing something.
Anyone help?
Thanks,
Dan
It looks to be a change made in passing the controller through to the ng-include. As #Sarah pointed out, it is probably a scope change.
Here is a plunker that is working.
I moved the ng-controller into the template itself and it seems to be working again. But had to wrap the template in a div (not ideal, I know).
<div data-ng-controller="NotificationsCtrl">
I also added the template src to the ng-include since it is a bit cleaner that way:
<li class="dropdown" id="header_notification_bar" data-ng-include="'notifications.tpl.html'"></li>
Hope this helps.