my json responce is {isVimeo = true } in angular js
<div ng-show={{isVimeo}}>
----
----
------
</div>
I want to show this div when isVimeo is true,but it is not display at my html.when i click inspect element in my html page the following code is there
<div ng-show="true" class="ng-hide">
</div>
when i remove the ng-hide class in inspect element it is displaying.By default it is not displayong
Can anyone help!
Thanks!
<div ng-show="isVimeo">
And be sure $scope.isVimeo is set to true in the current scope.
angular.module('testApp',[]).controller('testCTRL',function($scope)
{
$scope.wantToShow = true;
$scope.dontShow = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<head>ng-show example:</head>
<body data-ng-app="testApp">
<div data-ng-controller="testCTRL">
<br>
<b>ng-show is true:</b>
<span data-ng-show="wantToShow"> It is showing this becuase ng-show is true</span>
<br><br>
<b>ng-show is false(So,nothing we are showing):</b>
<p data-ng-show="dontShow">It is showing this becuase ng-show is true</p>
</div>
</body>
Related
I would really appreciete any help in the following task.
The task is pretty simple. I have a couple of paragraphs of text. Each paragraph has a title and desription. Decription should be hidden, and shown only after clicking "plus" button. On click "plus" icon should change to "minus". So far, I have maganed to acheve this. But then, after clicnkin again, text should hide again (that works), but the icon should change to "plus" again. And here I am failing. I have tried many ideas I found in the Internet, but could't make it working.
My HTML code:
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
jQuery code:
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).closest(".toggle-description").find(".more-text").toggle();
var button_plus = $(this).closest(".toggle-description").find(".plus-icon");
button_plus.css("display", "none");
var button_minus = $(this).closest(".toggle-description").find(".minus-icon");
button_minus.css("display", "block");
});
});
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).find(".plus-icon").toggle();
$(this).find(".minus-icon").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
In the jquery part change this button_plus.css("display", "none"); to button_plus.toggle() and button_minus.css("display", "block"); to button_minus.toggle() and it works.
jsfiddle link
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};
This is what i'm trying to achieve.
section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.
<div class="container" ng-init="advstatus=true">
Basic
<br/>
Advanced
<div class="section1" ng-hide="advstatus">
///...
</div>
<section ng-show="advstatus" class="section2">
///...
</section>
</div>
In AngularJS you need to use ng-click instead of onclick.
Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).
You should set up the variable in your controller:
<div ng-app ng-controller="myCtrl" class="container" >
Basic
<br/>
Advanced
<div class="section1" ng-show="!advstatus">
Section 1
</div>
<section ng-show="advstatus" class="section2">
Section 2
</section>
</div>
Controller:
function myCtrl($scope) {
$scope.advstatus = true;
}
JS Fiddle
This one is easy to understand
<div class="section1" ng-show="state1">
Section 1
</div>
<div class="section2" ng-show="state2">
Section 2
</div>
<input type="button" value="Advance" ng-click="sec1_show()" />
<input type="button" value="Basic" ng-click="sec2_show()" />
<script>
function homecntrl($scope) {
$scope.state1 = false;
$scope.state2 = true;
$scope.sec1_show = function () {
$scope.state1 = true;
$scope.state2 = false;
};
$scope.sec2_show = function () {
$scope.state2 = true;
$scope.state1 = false
};
};
</script>
Very simple just do this:
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>
I want to show a div on a button click using angularjs and HTML
I am learning angularJs.
I want to design a webpage in which on click of 'Add' button a div(EmployeeInfoDiv) is shown.
When I fill the textboxes in it and save it the data should reflect in table within the div(EmpDetTable).
Here is the HTML page code:
<body ng-app="MyApp">
<div ng-controller="EmpDetCtrl">
<div ng-model="EmpDetTable" class="container body" ng-hide="addEmp">
<label class="TabHeadings">Employee Details</label>
<div class="EmployeeInfo">
<table ng-model="Employee" border="1">
<thead><tr><th>Name</th><th>Designation</th><th>Salary</th></tr></thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>{{emp.name}}</td>
<td>{{emp.desg}}</td>
</tr>
</tbody>
</table>
<button ng-model="AddEmp" ng-click="ShowAddEmployee()">Add</button>
</div>
</div>
<div ng-model="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;" ng-show="addEmp" >
<label class="TabHeadings" style="width:830px;">Employee Details</label>
<div class="EmployeeInfo">
<table>
<tr><td><label class="table_label">Name:</label></td><td><input type="text" ng-model="name" class="textbox"/></td>
<td><label class="table_label">Designation:</label></td><td><input type="text" ng-model="desg" class="textbox"/></td>
</tr>
</table>
<div ng-model="botton_container">
<button ng-model="save" class="save_buttons" ng-click="SaveData();">Save</button>
<button ng-model="cancel" class="cancel_buttons" ng-click="ShowViewEmployee();">Cancel</button>
</div>
</div>
</div>
</div>
</body>
Controller Code:
function EmpDetCtrl($scope) {
$scope.employees = [
{ name: 'A',desg: 'C'}
];
$scope.addNew = function () {
$scope.employees.push({
name: $scope.name,desg: $scope.desg
});
}
$scope.ShowAddEmployee= function () {
return $scope.EmployeeInfoDiv=true;
}
$scope.ShowViewEmployee=function () {
return $scope.EmployeeInfoDiv = false;
}
}
I don't know whether this code is correct or not.
I just tried it.
Can anyone please help me out.
Thanks in advance.
Your ng-click is updating the EmployeeInfoDiv variable. So, reference that in ng-show and ng-hide:
<div ng-hide="EmployeeInfoDiv" class="container body">
...
<div ng-show="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;">
You do not need ng-model in the div to make that work.
ng-model="EmployeeInfoDiv"
Update
A few more issues. Most important is that (at least in the code posted) MyApp isn't defined anywhere, and your controller is defined on the global scope. So you need to change your html to:
<div ng-app>
<div ng-controller="EmpDetCtrl">
...
However, note that this is not the recommended method. See the angular documentation for controllers.
Here is a working demo: http://jsfiddle.net/wittwerj/xrB77/
Anyone can please tell me what im doing wrong here:
i just update the library, and seems that the code broke for some reason it's not doing anything.
angular library
html5 code
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<header id="header">
<h1 id="logo"></h1>
<div id="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn">about</a>
<a ng-click="setRoute('experiments')" class="btn">Experiments</a>
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>
<div id="container">
<div ng-view></div>
</div>
angular.js
angular.module('WebSite', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {templateUrl:'folder/test.html', controller:AboutCtrl}).
when('/experiments', {templateUrl:'folder/test.html', controller:ExperimentsCtrl }).
when('/home', {templateUrl:'folder/test.html', controller:HomeCtrl }).
otherwise({redirectTo:'/home'});
});
function AboutCtrl($scope) {
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
}
function ExperimentsCtrl($scope) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
}
function HomeCtrl($scope) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
}
First you need to use ng-app to setup the angular application with your module. Maybe you already did, but it is not part of the snippet you posted:
<html ng-app="WebSite">
Also, about the setRoute(), I don't know where you copy that from, but you don't need it. Just use the href with the hash, for example:
about
You need to check out the source from github at https://github.com/simpulton/angular-website-routes
There is no changeRoute method. After some dialog, I realized it was best to handle the anchors tags as naturally as possible.
Your menu element should look like this
<div id="menu">
Home
About
Experiments
</div>
Hope this helps!