Angularjs ng-show on ng-click not working - javascript

I have created a button like with angularjs,
<button class="btn btn-setting" ng-click="showSearch = ! showSearch" >
<img src="theme/images/settings.png" width="111">
</button>
And a div like ,
<div ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>
I need to toggle the visibility of the above div on the button click.but it is not showing.

Update the showSearch model as follows
$scope.showSearch = {hideShowSearch : false}
Updated HTML
<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" >
<img src="theme/images/settings.png" width="111">
</button>
<div ng-show="showSearch.hideShowSearch" >This is the test</div>
EDIT -
In your script hideShowSearch is primitive one.So it does not perform two way data-binding.As result you not getting expected result.

Just do
<button ng-click="setshowme(show)"></button>
$scope.setshowme = function (value) {
if(value == true){
$scope.show = false;
}else{
$scope.show = true
}
}

Here is a simple JSFiddle
<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" >
<img src="theme/images/settings.png" width="111" />
</button>
<div ng-show="showSearch">Hello World</div>

First check these two elements (<button> & <div>) inside two ng-controllers
If so this will not work since ng-controllers have their own scopes. So that showSearch is in one scope and other controller scope do not have direct access to it.
Then check something like,
<div ng-show='showSearch'>show / hide div ...</div>
and see if this div is toggling its visibility.
if it working properly
then check the path to src of ng-include is correct.
here is a DEMO

Related

How to Assign two function to a single toggle button in angular js

I want to change a button name once it is clicked. There are two functions differently Add and Subtract. first-time button name is 'Add', when it clicked it should execute add number function and then name dynamically change button name to Subtract, and once I clicked to subtract it should execute subtract function and again the name of a button come to Add which is previous. How can I do this? how to call a different function like add function when button toggle is add and vice versa.
now I can toggle between two buttons but facing issues with calling add and subtract functions.
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-click="toggle = !toggle">
{{ toggle ? 'Add' : 'Subtract' }}
</button>
</div>
</div>
Varsha, Could you please check this working fiddle. Do you want this?
Explanation: You can use a flag (functionToBeCalled in this case) to call the targeted function and switch the text of the button.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="functionToBeCalled == 'Add' ? add() : substract();">
{{ functionToBeCalled }}
</button>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.functionToBeCalled = "Add";
$scope.add = function() {
$scope.functionToBeCalled = "Substract";
alert('Add is clicked');
};
$scope.substract = function() {
$scope.functionToBeCalled = "Add";
alert('Substract is clicked');
};
});
</script>
</body>
</html>
You probably want to have 2 buttons defined and show one of them at a time using ng-if. ng-if removes the button from the DOM if the condition is not met. See the official documentation: https://docs.angularjs.org/api/ng/directive/ngIf
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-if="toggle" ng-click="add()">
Add
</button>
<button ng-if="!toggle" ng-click="subtract()">
Subtract
</button>
</div>
</div>

I want to hide div after clicking on close button Angular 6

I want to hide div after clicking on close button in Angular 6 and other want to change the other div class.
For example other div class is col-sm-7, once close button clicked it will change to col-sm-12.
In my component.html
<div id="custom-div">
<button class="close" type="button" click="featureHide()">X</button>
</div>
<div id="another-div" class="col-sm-7"></div>
In my component.ts
featureHide() {
document.getElementById('custom-div').style.display='none';
var element = document.getElementById("another-div");
element.classList.add("col-sm-12");
}
But its not working, please suggest.
I suggest to use Angular [ngClass] directive instead:
Here a stackblitz working example (remember to expand the browser tab to exceed the sm breakpoint)
//Apply [hidden] to hide the button
<div id="custom-div" [hidden]="!isShow" >
// Use '(click)' instead of 'click'
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
//Apply [ngClass] directive
<div id="another-div" [ngClass]="{'col-sm-7': isShow , 'col-sm-12': !isShow }"></div>
In your ts file:
isShow = true;
featureHide() {
this.isShow= false;
};
It can also be done the way you tried, but change click to (click) first, then in your ts:
featureHide() {
document.getElementById('custom-div').style.display = 'none';
const element = document.getElementById("another-div");
element.classList.remove("col-sm-7");
element.classList.add("col-sm-12");
}
Your approach is wrong in angular. Try avoiding document.xxx use angular.xxx.
Please find the below code
In component.html
<div id="custom-div">
<button class="close" type="button" (click)="featureHide()">X</button>
</div>
<div *ngIf="hideFalg" id="another-div" class="col-sm-7"></div>
In my component.ts
hideFalg:Boolean = true
featureHide()
{
this.hideFalg = false; // this code will hide the div element since we have added the *ngIf
}
To display div
showDiv(){
this.hideFalg = true;
}

Change a div on click of button

I am new to front-end. Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling .
So at the start this will be the div that I will show
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one.
And on again click of that button a third div
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . Its like a round robin fashion .
Now what I tried is using ng-show and ng-if. Can any one help me with this?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}
It's quite simple, you can do it in many ways, for example:
In the controller
Define a scoped variable (bindable with the front-end)
$scope.showView = "firstView"
Define also a function:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>

ng-click not working with ng-if angularjs

I am trying to toggle a div on button click like as bellow.
This is working.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
This is not working.
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
Why it is not working, when I add ng-if="$state.current.url!='/splash'" ?
Well,
Every angular directive create new scope
In the code below
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>
The ng-if directive create new scope.And withing this scope
the value of x is updated on button click.But this new value of x is not accessible outside this ng-if div as it is local to that scope and it is primitive type.
Since this x is primitive type so there is no data update as reference are differant.
You should use object model instead.
Here is the updated HTML
<div ng-if="$state.current.url!='/splash'" >
<button ng-click='x.showHide = ! x.showHide'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>
define x like this one in your controller.
$scope.x = {showHide:false}
EDIT-
In your first woking HTML, there is not directive on div.So, both these DIV come under same scope.So,x accessible across this two DIV with updated value.
<div>
<button ng-click='x = ! x'>toggle</button>
</div>
<div ng-include="'pages/include/search.html'" ng-show='x'></div>

Click button to copy text to another div with angularjs

I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>

Categories