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>
Related
Here I ave written a vue.js code. Here I have tried to achieve to toggle a div. if i will click a button "deals of the day" then I am toggling a other div. similarly I am doing with all other three divs. And it is working fine but i want to enhance this functionality like if user clicks on one button then div will toggle then similarly if user clicks on other button to toggle a div then previously toggle div should automatically close how to achieve this in vue.js
<script>
new Vue({
el: '#category_app',
data () {
return {
toggle: false,
latestClassifieds: false,
latestcomments: false,
}
},
})
</script>
<div>
<div>
<div #click='toggletwo = !toggletwo' class="dealOfDay">Deal of the day</div>
<div v-show='toggletwo' class="DayListings">Deals of the day Listings</div>
</div>
<div>
<div #click='latestClassifieds = !latestClassifieds' class="dealOfDay">Advertiser</div>
<div v-show='latestClassifieds'>Advertise listings</div>
</div>
<div>
<div #click='latestcomments = !latestcomments' class="dealOfDay">Latest Classifieds</div>
<div v-show='latestcomments'>Latest classified listings</div>
</div>
</div>
A quick solution could be:
<script>
new Vue({
el: '#category_app',
data () {
return {
toggle: 1
}
}
})
</script>
<div>
<div>
<div #click='toggle = 1' class="dealOfDay">Deal of the day</div>
<div v-show='toggle === 1' class="DayListings">Deals of the day Listings</div>
</div>
<div>
<div #click='toggle = 2' class="dealOfDay">Advertiser</div>
<div v-show='toggle === 2'>Advertise listings</div>
</div>
<div>
<div #click='toggle = 3' class="dealOfDay">Latest Classifieds</div>
<div v-show='toggle === 3'>Latest classified listings</div>
</div>
</div>
You can set toggle variable to 0 by default if you don't want to have any of them open after page is loaded.
So I have a ng-repeat iterating through an array that contains the elements form an API. Through the ng-repeat , I print out the same number of div(s) containing the names of some properties as the number of property present in the API in different objects. Now the next step that I want is that when I click on any property Name div, another screen is opened up which has the details of the property ( details are then fetched from the API which I can do). What I am not able to do is how to use the ng-click that it goes to the details screen but according the property that is clicked. I know that somehow I need to pass the property ID in ng-click and lead it to a different screen. Can't figure out how. Kinda am new to Angularjs so can someone help?
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="Something here which I cant figure out ">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
Now when the divs are created for the different properties when I click on one of them a new screen comes and then I show there what I want to show for the property.
PS- for property ID : prop.id
Use can directly write function call.
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="propDetails(prop.id)">
<p class="propSummaryName">{{ prop.name }}</p>
$scope.showDetails(propId) {
// do want ever you want to };
If you want to show property details on another screen then you can use
modal or routing.
hey it's Simple You can call the #scope function in the ng Click and inside the function call the reset service and then open the popup
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp" ng-controller="test">
<div ng-init="loadData()">
<div ng-repeat="prop in propertyDetails" class="propertyCard"
ng-click="openMyPopUp(prop)">
<p class="propSummaryName">{{ prop.name }}</p>
<div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Name : {{popupData.name}}
Id : {{popupData.id}}
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('test', function($scope, $http) {
var popup = angular.element("#myModal");
//for hide model
popup.modal('hide');
var url = 'your-url.com/rest/api'
$scope.loadData = function(){
$http.get(url).then(function(res){
$scope.propertyDetails = res.data;
});
}
$scope.openMyPopUp= function(data) {
$http.get(url + '?id=' + data.id).then(function(res){
$scope.popupData = res.data;
});
//for show model
popup.modal('show');
}
});
</script>
If you need to rederct to another page mean you can do like this
var url = "http://" + $window.location.host + "/Account/Login";
$log.log(url);
$window.location.href = url;
inside this function
I have a DIV with ng-show.
When I run ng-click on an element outside of the DIV, it works fine and I can hide it.
When I run ng-click on an element inside of the DIV, it does not work. I can see the variable beeing changed when i console.log it, but the view will not update.
I have tried to use $scope.$apply() but it gets an error and says it is already running $apply().
Parts of controller:
$scope.selectedActivity = {
"dayNr": 0,
"actNr": 0
};
$scope.resetSelectedActivity = function () {
console.log("SelAct: ", $scope.selectedActivity);
$scope.selectedActivity.dayNr = -1;
$scope.selectedActivity.actNr = -1;
console.log("SelAct: ", $scope.selectedActivity);
};
$scope.setSelectedActivity = function (dayNr, actNr) {
console.log("SelAct: ", $scope.selectedActivity);
$scope.selectedActivity.dayNr = dayNr;
$scope.selectedActivity.actNr = actNr;
console.log("SelAct: ", $scope.selectedActivity);
};
Parts of HTML:
<div ng-repeat="x in xs">
<ion-scroll>
<div ng-repeat="y in ys track by $index">
<div ng-click="setSelectedActivity($parent.$index, $index)">
<!--THE PROBLEM IS HERE-->
<div ng-show="selectedActivity.dayNr == $parent.$index && selectedActivity.actNr == $index">
<div>
<!--THIS LOGS OUT CORRECT VALUES BUT NG-SHOW IS NOT UPDATED-->
<div ng-click="resetSelectedActivity()">
Reset
</div>
</div>
</div>
<div>
<img src="img/checkButtonOverlay.png" />
</div>
</div>
<!--THIS LOGS OUT CORRECT VALUES AND NG-SHOW _IS_ UPDATED-->
<button ng-click="resetSelectedActivity()">reset</button>
</div>
</ion-scroll>
</div>
Please note that i have removed A LOT from the code because of confidentiality, but the principle should be the same.
Thank you!
Found the problem!
I had a ng-click that showed the DIV outside. When I clicked both ng-clicks got entered.
So First resetSelectedActivity() and then it got set again in setSelectedActivity().
Fixed it using:
<div ng-click="resetSelectedActivity($parent.$index, $index, $event)">
...
</div>
and:
$scope.setSelectedActivity = function (dayNr, actNr, event) {
$scope.selectedActivity.dayNr = dayNr;
$scope.selectedActivity.actNr = actNr;
//This cancel the mouseclick
event.stopPropagation();
};
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>
http://i.stack.imgur.com/o2Kht.png
Basically I want these buttons to be side by side.
I've put them in a container but I cannot get them side by side like the example below.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- Linking Style Sheets -->
</head>
<body>
<style type="text/css">
<!-- Background image -->
</style>
<div class="img-wrapper-center" id="titlebar">
<img src="titlebar.png" id="img1"/>
</div>
</div>
<div id="bodycontainer">
<div id="text">
Welcome to the shop, you can add your items to to the cart below
</div>
<div id="formcontainer">
<div id="myForm">
<form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)">
<input type="radio" name="ram" value="yes">yes<br>
<input type="radio" name="ram" value="no">no
<br><br>
<input type="radio" name="cpu" value="yes">yes<br>
<input type="radio" name="cpu" value="no">no
<br><br>
<input type="radio" name="harddrive" value="yes">yes<br>
<input type="radio" name="harddrive" value="no">no
<br><br>
</div>
<div id="submitbuttons">
<input type="submit" value="Submit">
<input type="reset">
</div>
</div>
</form>
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
</body>
<!-- Start of rollover script -->
<script>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "homebuttonup.png"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "homebutton.png"
function SwapOut() {
document.homebtn.src = Rollimage[1].src;
return true;
}
function SwapBack() {
document.homebtn.src = Rollimage[0].src;
return true;
}
Rollimageshop = new Array()
Rollimageshop[0]= new Image(121,153)
Rollimageshop[0].src = "shopbuttonup.png"
Rollimageshop[1] = new Image(121,153)
Rollimageshop[1].src = "shopbutton.png"
function SwapOutshop() {
document.shopbtn.src = Rollimageshop[1].src;
return true;
}
function SwapBackshop() {
document.shopbtn.src = Rollimageshop[0].src;
return true;
}
</script>
<!-- end of rollover script -->
<!-- Start of form validation -->
<script>
function checkWholeForm(theForm) {
var reason = '';
reason += checkRadioButtons(theForm.ram);
if (reason != '') {
alert(reason);
return false;
}
return true;
}
function checkRadioButtons(radiobuttons) {
var checkvalue = "";
var i=0;
var error = "";
var amountOfRadioButtons = radiobuttons.length;
for (i=0; i<amountOfRadioButtons; i++) {
if (radiobuttons[i].checked) {
checkvalue = theForm.ram[i].value;
}
}
if (!(checkvalue)) {
error = "Please choose an option for RAM.\n"
}
return error;
}
</script>
<!-- End of form validation -->
Sorry for delay, rofl im new to adding code to this so i did not know how to ident it.
.homebtn, .shopbtn{
display:inline; /*or inline-block*/
}
I made a jsfiddle here using images from google image search because I don't have access to your images, but the css should be quite similar for your own uses.
You should also fix your html for the button container
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()">
<img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()">
<img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
You currently have one button nested inside of the other.
Looking at your code, I can spot a few areas that can be improved.
First, you're using JavaScript to handle the button rollovers. Unless there is a specific reason to be doing this, it isn't necessary. A more efficient way to do this would be to use pure CSS for the button rollovers.
Second, you have the images embedded in the link itself:
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
If you were to actually use CSS based navigation, you wouldn't need to do this. The benefit is less code and ultimately page size and load time. Keep in mind, every image loading is a separate HTTP Request to the server. This equals more bandwidth in the long run. Your website may not be effected by this type of stuff, but it's good practice; best practices.
I have created a JSFiddle to show you how I would approach your navigation. One other thing I would add is putting all of the navigation imagery into a Sprite.
http://jsfiddle.net/cbPRv/