In my controller I have input box and a div with text.
By default div is set to display:none
I want to make div visible by focusing on input box.
Is it possible to do with angular.js
Try this (No need to set you div display:none, initally showDiv is false and your div will be hidden):
<body ng-controller="myController" ng-init="showDiv=false">
<input type="text" ng-focus="showDiv=true">
<div ng-show="showDiv"></div>
</div>
Yea Angular makes it super easy without even having to write anything in controller, here's an example:
https://plnkr.co/edit/OqLpGxWwfPaBTVdTBYDy?p=preview
<body ng-controller="MainCtrl">
<input type="text" ng-hide="show" />
<button ng-click="show = !show">Show / Hide</button>
</body>
Obviously you could make yours on a hover instead of a click but you get the idea.
Related
I have an angular 1.5.7 page using hammer.js 2.0.8 with angular-hammer library.
My <body> is 100% height and has swipe events on it that allow a user to page back and forth. But within the body, I have a list of <input> tags which I have a different swipe event on.
The problem is the swipe on the <body> is always triggered, even when I swipe over the <input>.
<body ng-app="myApp" ng-controller="myCtrl" ng-cloak hm-swiperight="prevDay(page)" hm-swipeleft="nextDay(page)">
<h1>{{data[page].today | dateSuffix}}</h1>
<div ng-repeat="item in data[page].items track by $index"
hm-swiperight="strikeOn(page, {{$index}})"
hm-swipeleft="strikeOff(page, {{$index}})"
hm-press="splashOn(page, {{$index}})">
<input
value="{{item.name}}"
placeholder="Item #{{$index+1}}"
ng-class="{strike: item.done==true}"
ng-trim="true"
ng-model="item.name"
ng-change="save()"
/>
</div>
</body>
How do get the swipe on the <input> to take precedence over the swipe on the <body>?
body or parent is always prior to other inside elements, you can't touch input without touching the body and it's logical.
But if you ask me, i will put 2 div on left and right of my body and then i set attr swiperight and swipeleft on each of them, to solve this problem.
<body>
<div class="left" hm-swipeleft="prevDay(page)"></div>
<div class="right" hm-swiperight="prevDay(page)"></div>
//----other elements
</body>
div are absolute position, and when user swipe right from right of body it will work on body, also left, and when user touch inside body you input element will work.
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I am new to AngularJS and I have seen others asking similar questions, but the answers are not working for me. Rather than hijacking those questions, I thought I would open one for myself.
I am creating a demo app -- it lists "sites" which can be added to or deleted. I am using the ng-show attribute to display the required html div while hiding the others.
Here is the back-end javascript--
var SiteMaintenanceModule = angular.module("SitesMaintenance", []);
SiteMaintenanceModule.controller("siteCtrl", diveSiteCtrlfn);
function diveSiteCtrlfn($scope) {
// initializing the sites array
$scope.sites = sites;
//initializing the Divs array
$scope.allowedDivs = ["listSiteDiv","addSiteDiv", "editSiteDiv","deleteSiteDiv"];
// setting the first div as selected. This should show the div which lists the sites
$scope.selectedDiv = $scope.allowedDivs[0];
// function to be called with the selected div is to be changed
$scope.setSelectedDiv = function ($divSelectedByUser) {
$scope.selectedDiv = $divSelectedByUser;
}
};
And here is the html
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="SitesMaintenance">
<head>
<title>List of Dive Sites</title>
<link rel="Stylesheet" href="./../zHelpers/bootstrap/css/bootstrap.css" />
<script src="./../zHelpers/angular.min.js"></script>
<script src="./sites.js"></script>
<script src="./SiteMaintenance.js"></script>
</head>
<body ng-controller="siteCtrl">
<!-- Display the list of sites based on the selectedDiv variable-->
<div id="SiteList" ng-show="{{selectedDiv == 'listSiteDiv'}}">
<h3>List of Sites</h3>
<ul ng-repeat="site in sites" ng-model="sites">
<li>{{site.site}} in {{site.location}}</li>
</ul>
</div>
<!-- Display the add site Div based on the selectedDiv variable-->
<div id="AddSite" ng-show="{{selectedDiv == 'addSiteDiv'}}">
<h3>Add New Site</h3>
<div style="display:block; margin:10px">Site: <input id="inputAddSiteName" /></div>
<div style="display:block; margin:10px">Location: <input id="inputAddSiteLocation" /></div>
</div>
<!-- Display the edit site Div based on the selectedDiv variable -->
<div id="EditSites" ng-show="{{selectedDiv == 'editSiteDiv'}}" style="display:block;margin:20px">
Site Name:<input id="InputEditSiteName" />
Site Location:<input id="InputEditSiteLocation" />
</div>
<div id="controls">
<button id="AddNewSiteButton" ng-click="setSelectedDiv('addSiteDiv')">Add Site</button>
<button id="DeleteSiteButton" ng-click="setSelectedDiv('deleteSiteDiv')">Delete Site</button>
<button id="EditSiteButton" ng-click="setSelectedDiv('editSiteDiv')">Edit Site</button>
</div>
</body>
I can set the visible div to whatever I want at the start, by changing the index in the statement "$scope.selectedDiv = $scope.allowedDivs[0];" in the JavaScript.
I change the value of $scope.selectedDiv when any of the buttons on the page are clicked, so as to change the visibility of the divs.
However, the visibility of the divs doesn't change, no matter what the value of $scope.selectedDiv is. In fact, when debugging in chrome, I see that the attribute value of ng-show for each of my divs updates dynamically to "true" or "false" and expected, but the div is still displayed -- the initially invisible divs seems to have a class="ng-hide" attribute, which never changes.
I have tried $scope.$apply() in the JavaScript but that gives errors. Any help would be greatly appreciated.
You don't need to use {{}} interpolation inside ng-show directive directive, it evaluates the expression inside a $scope of your controller directly.
ng-show="selectedDiv == 'addSiteDiv'"
ng-show="selectedDiv == 'listSiteDiv'"
ng-show="selectedDiv == 'editSiteDiv'"
Is it possible to use the whole window as droparea?
Sure, I can append ngf-drop attributes to body, but then some other HTML elements lay over and I can't drop my files there… Otherwise I can not use a DIV an append those attributes an lay it over all other elements, because nothing else is clickable.
Or how can I achieve that behaviour with vanilla js / css?
If you add it to the body or a div that contains all the elements it should work, make sure the body container div is full size and include all the element. The dragover and drop event would still be called on the body or container div.
Sample: http://jsfiddle.net/w812qp1s/
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div style="width:100%;height:100%" ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"><div>Drop File:</div>
<div>No Drop File Div</div>
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
</ul>Upload Log: <pre>{{log}}</pre>
</div>
</body>
I'm trying to cloak a DOM element until an input field has any value in it. How can I achieve this with ng-cloak?
<div>
<input data-ng-model="search.$" placeholder="Search" type="text" id='search-bar' />
</div>
<div class="single_review text_centered">
This only displays if the #search-bar has an input value.
</div>
I believe you are looking for ng-show:
Example:
<div class="single_review text_centered" ng-show="search.$.length">
Demo: http://plnkr.co/edit/xDmsDOQC8R0qXHgl9VWl?p=preview
Note that if you only use ng-show="search.$" instead of ng-show="search.$.length" the div will not show if you type "f" or "false" as they are considered falsy.
An alternative is ng-if, but then the div would actually be inserted/removed from the DOM instead of just shown/hidden.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
This is not what you are trying to do. If you are on Angular 1.2+ (I believe) you can do
<div class="single_review text_centered" ng-if="search.$.length">
This only displays if the #search-bar has an input value.
</div>
Otherwise, you can do:
<div class="single_review text_centered" ng-show="search.$.length">
This only displays if the #search-bar has an input value.
</div>
Just an other way (more verbose ^^ but according to the note of #tasseKATT can be safer):
app.directive("myCloack", function() {
return {
link:function(scope,el){
el.css('display','none')
scope.$watch('search.$',function(newValue){
if(newValue){
el.css('display','block')
}
});
}
}
});
to play around
<div>
<input data-ng-model="search.$" placeholder="Search" type="text" id='search-bar' ng-init="mysearch=false" ng-change="mysearch=true" />
</div>
<div class="single_review text_centered" ng-show="mysearch" >
This only displays if the #search-bar has an input value.
</div>