I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!
To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.
Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.
Related
I have some javascript that I'm trying to convert into Angular:
$('.col-lg .fa-clock-o').click(function(e){
$(this).parent().toggleClass('set-time');
e.preventDefault()
});
I've tried adding the following to the child element containing the link, but it doesn't work, maybe theres a proper 'angular' way to do this instead?
A more 'Angular' way to do this would be to set a variable which represents whether or not the set-time class is present on the parent element. By default this would be undefined which is falsy.
Then to toggle it in your ng-click you can just set the value to be the opposite of what it currently is.
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
Here's a working example:
var app = angular.module('app', []);
.set-time {
background :red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-class="{'set-time': setTimeClass}">
<a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>
</div>
The following works, but not sure its the angular way:
HTML:
Controller:
public toggleTimepickerPopup(event : any) : void{
jquery(event.target).parent().toggleClass('set-time');
event.preventDefault()
}
Parent is not a function, it's a prototype:
Correct usage is:
$(this).parent
And your anchor element:
This code will replace what is shown inside <button></button> with selected icon from dropdown list.
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want <li> to be unchanged
http://codepen.io/filaret/pen/PGJEAL
HTML:
<div class="input-group-btn">
<button type="button" class="btn" data-toggle="dropdown">
<i class="fa fa-book"></i>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i> Something 111</li>
<li><i class="fa fa-newspaper-o"></i> Something 2222</li>
</ul>
</div>
jQuery:
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// Put it inside <button></button>
$selectWrapper.find(".btn").html($selectedIcon);
});
You need to clone the icon using clone() like following
var $selectedIcon = $(this).find('.fa').clone();
instead of
var $selectedIcon = $(this).find('.fa');
UPDATED CODEPEN
Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.
jQuery(document).ready(function($) {
"use strict";
var $selectWrapper = $('.input-group-btn');
var $buttonIcon = $('.btn i');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// get icon classes
var classes = $selectedIcon.attr("class");
// Put the class in the button i tag
$buttonIcon.attr('class', classes);
});
});
See code pen: http://codepen.io/anon/pen/ORxQPZ
this is my html file.this is my dropdown having two listitems password reset and send activation email i want to disable reset password
<div class="active-send-select" pull-left btn-group title="{{::'title.active.filter' | translate}}">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown" ng-disabled="!actionButtonStatus.SENT">
<i class="fa fa-envelope fa-lg"></i>
<span class="action-button-text">{{::'label.button.send' | translate}}</span>
<i class="icon-chevron-down pull-right" style="margin-top:-20px;"></i>
</button>
<ul class="dropdown-menu filter-state">
<li ng-class="abc"><span ng-class="{resettest: userstatus == 'Complete'}">{{::'label.dropdown.sendActivation' | translate}}</span></li>
<li class="test-dropdown">
<span ng-class="{resettest: userstatus == 'Notified' || 'Added'}">{{::'label.dropdown.resetPassword' | translate}}</span>
</li>
</ul>
</div> i did this wid ng-class a su told now its showing gray color and but still m able to click on the password reset list item and it is redirecting to password reset page.
CSS code
.resettest{
color: darkgray;
cursor: not-allowed;
}
In your controller:
isSelectDisabled() {
if (this.currentState === 'not ready') {
return true;
}
return false;
}
Then in your template:
<li ng-disabled="vm.isSelectDisabled()"></li>
This assume you use vm ofc.
You can do this without a custom $scope function:
<li ng-disabled="currentState === 'Not ready'"></li>
If that condition evaluates to true then disabled will be true. However seeing as you're putting this on a li element I don't think anything will happen. You'd be better off putting this condition on a button element.
EDIT:
The problem here is that disabled attributes have no effect on li elements. If you want to show that that list item is disabled you will need to apply either a class or a style, using ng-class or ng-style respectively.
I have made a modal in angular, it pops up great but the exit button doesnt fire to close the modal. It works if the button to open is reclicked but adding a new button inside the modal does not fire the function. Btw there is no bootstrap in this.
<section class="modal" ng-show="showMenu">
<div ng-click="setActive(album)">
<p class="exit" ng-click="modalFunc()"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></p>
<h1>{{albumMod.artist}} - {{albumMod.title}}</h1>
<ul class="tracks">
<span><img src={{albumMod.img}}></span>
<li>Album: {{albumMod.album}}</li>
<li>Price: $1.29</li>
</ul>
<form style="display: inline" action="/#cart" method="get">
<button ng-click="setActive(album); cartFunc()" id="{{album.id}}"><a>Add</a></button>
</form>
</div>
</section>
$scope.closeMenu=true;
$scope.showMenu=false;
$scope.showItems=false;
$scope.modalFunc= function(){
$scope.showMenu = !$scope.showMenu;
console.log($scope.selected);
$scope.showItems = !$scope.showItems;
$scope.closeMenu=!$scope.closeMenu;
// console.log($scope.selected.attr("id"));
};
$scope.showMenu flag which you have used to hide popup is not used correctly. When $scope.modalFunc method is called then you negate the value of $scope.showMenu and assigned. So after assignment, $scope.showMenu value will be true.
Now you have used ng-show="showMenu" so your popup will not be hide.
Correct code will be:
1. Set $scope.showMenu = true in the callback which called when popup is opened.
2. $scope.modalFunc= function(){
$scope.showMenu = !$scope.showMenu;
...
}
3. Remove $scope.showMenu=false; since it is not needed.
I've created a custom tabbed element using the following code:
<div class="row step">
<div class="col-md-4 arrow active" ui-sref-active="active">
<a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }">
<span class="number">1</span>
<span class="h5">Key Elements</span>
</a>
</div>
<div class="col-md-4 arrow" ui-sref-active="active">
<a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }">
<span class="number">2</span>
<span class="h5">Questions</span>
</a>
</div>
<div class="col-md-4 arrow" ui-sref-active="active">
<a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }">
<span class="number">3</span>
<span class="h5">Publish</span>
</a>
</div>
</div>
As you can see I'm using ui-sref-active="active" to add a class of active to an element when it is clicked. My issue is getting the first element to display with a class of active when the page is first loaded as currently it only happens when an item is clicked. I've tried manually adding active to the first element but this seems to be ignored.
The problem is that the first route dashboard.create.key_elements is not the current route, so ui-router disables it as "active".
Solution:
Add another class in the CSS e.g. "newclassname" to have the same behavior of "active" class
Add ng-class to the first element conditioned to a variable in $scope and ng-click on the other elements so to disable it
In the JS:
$scope.firstActive = true;
$scope.changeFirst = function() {
$scope.firstActive = false;
};
EDIT:
Better yet, instead of dabbling with ng-click, you can simply inject the variable when you define the routes. E.g. from a snippet of my own code
.state('ordini', {
url: '/ordini/:pdv',
templateUrl: 'ordini/ordini.html',
controller: 'OrdiniController',
resolve : {
CartValue: ['$rootScope', '$stateParams', 'CartService', function($rootScope, $stateParams, CartService){
return CartService.getCartValue($rootScope.user.MachCode, $stateParams.pdv);
}]
}
See documentation