If I'm having this code below. How can I render the div(#divToRender) when clicking the button. I know there is angularJs code for hide/show. But I dont want it to be rendered until I click my button. Is that possible? //Thanks
<button>Render my div!</button
<div id="divToRender">
Some text
</div>
You could use ng-if, it will render the element only if the expression is evaluated to true.
<button ng-click="showMyDiv = true">Render my div!</button>
<div id="divToRender" ng-if="showMyDiv">
Some text
</div>
Example Plunker: http://plnkr.co/edit/jtasEuhNCghprsGZjSrh?p=preview
Also see ngIf documentation.
Related
I have a full template
I would like to put a watch on this tempalte, in order to call a function in the controller any time something is clicked inside that template.
I know I have to use a watch (I believe I do) but I don't understand how to to the connection between the full template and the watch.
To do this just add the ng-click directive to your parent element so that every click inside that element evaluates the expression inside the ng-click attribute:
<div class="parent" ng-click="callFunction()">
<div>Hello World</div>
</div>
If you want some clicks inside the parent element to not trigger the parent ng-click you can add $event.stopPropagation() to stop event propagation:
<div class="parent" ng-click="callFunction()">
<div>Clicking here will call parent callFunction()</div>
<div ng-click="$event.stopPropagation();callAnotherFunction();">
Clicking here won´t call parent´s callFunction()
</div>
</div>
I'm attempting to learn AngularJS (background in BackboneJS). I have a div with some content inside, and I hope to render this div as a modal upon clicking inside of it:
<div class="stickynote"> Content here </div>
My thinking is to add a modal class that I can style in CSS. However, I'm not too sure how to add the modal class upon clicking (and conversely, removing the modal class upon clicking after the modal is rendered). Would I have to use ng-click and somehow set the class property from the JavaScript (myApp.js) file?
If you want to use your own modal styling and if you simply want to achieve adding an extra item to class attribute of your element, you can use a combination of ng-class and ng-click:
<div class="stickynote"
ng-class="{yourModalCSSClass: isModalOpen}"
ng-click="isModalOpen = true">
And somewhere else, you need another ng-click to turn it off:
<button ng-click="isModalOpen = false">Close modal</button>
Beware that both div and button must be in the same scope hierarchy to be able to use the same isModalOpen value. And by the way, I haven't tried this code but this should give you an idea. If you have a controller/directive, you can set isModalOpen from there by introducing functions in the scope:
// controller
$scope.toggleModal = function () {
$scope.isModalOpen = !$scope.isModalOpen;
}
<div ...
ng-click="toggleModal()">
<button ng-click="toggleModal()">...
If you're open to using a third-party solution, ng-dialog is an outstanding solution for modals+Angular.
https://github.com/likeastore/ngDialog
I've built a directive <playlist> which calls my custom service to return and then display a list of videos. So far so good. However, I don't want this directive to render and call my API until the user clicks on a link elsewhere on the page.
How can I have a link outside of the directive trigger the rendering of the <playlist> item? I looked for some sort of onShow event to no avail.
You can use the ng-if directive to keep your directive out of the DOM until the link is clicked. So your HTML would looks something like this:
<div ng-if="showPlaylist">
<playlist />
</div>
Then you would just set showPlaylist to true when you want it to show/render.
I was able to figure this out based on dnc253's feedback.
Toggle Playlist
<div ng-if="showPlaylist != undefined">
<playlist ng-show="showPlaylist"></playlist>
</div>
On initial page load <playlist> is hidden and not rendered. Clicking the link renders <playlist>. Subsequent clicks toggle the ng-show attribute and so the scope is not reset.
I would like to style a text by its length. So true is red and false is green. I use ng-class with expression. It's possible to change the css after a user click?
This is a plunkr: http://plnkr.co/edit/ndCqpZaALfOEiYieepcn?p=preview
<div>
<p ng-class="{true:'green',false:'red'}[name.length>3 && toggle]">{{name}}</p>
<p><b>Length: </b> {{name.length}} character(s)</p>
<button ng-click="toggle=!toggle">Toggle class</button>
</div>
Initially, toggle is undefined, which I think is causing an error when evaluating the expression [name.length>3 && toggle]. Then when you click the button, the opposite of undefined is true, so then your toggle starts working as you expect.
To fix this, you can use ng-init to evaluate an expression before the views are processed.
For example, if you change your div to be:
<div ng-init="toggle = true">
then the class starts out as green initially.
I am somewhat new to using Angular and AngularStrap directives. I need to use the tab directive with static markup like the example:
<div data-fade="1" bs-tabs>
<div data-title="'Home'"><p>Static tab content A</p></div>
<div data-title="'Profile'"><p>Static tab content B</p></div>
</div>
On another part of the page I would like to display a div only when the first tab is selected. The div is not part of the tabs, but is in the same overall controller. How can I show/hide this div based on the selected tab?
Something like this?
<div ng-show="???? active tab stuff here ????">Home tab is selected</div>
Thanks for any help.
As shown in the example on the AngularStrap page the active tap is stored in
tabs.activeTab
So you can use this property to conditionally show display something else like so
<div ng-show="tabs.activeTab == 0">The first tab is active</div>
UPDATE
Even with non object tabs you can just bind a model against the bs-tabs to store the active ID like so:
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
Here is an updated plnkr. (Click on the 3rd tab and see the 'Test' text appear)
I found somewhat of a hack to resolve this issue for now. This does not seem like the best approach, so if someone has a better idea, please share.
I realized that the bsTabs directive is creating data-toggle attributes for each tab. By watching the data-toggle shown event, I am able to recognize the tab change and display the div. The controller code looks like this:
$scope.HomeTabSelected = true;
function watchTab() {
$('a[data-toggle="tab"]').on('shown', function (e) {
$scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home"));
})
}
setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render
and the HTML div uses ng-show.
<div ng-show="HomeTabSelected">Home tab is selected</div>