I need a way to hide a parent element if the element inside of it is empty using AngularJS.
Would this be a custom directive type issue or is there a way to put the logic into something like ng-show or ng-hide?
<div class="item"> <!-- item should be hidden -->
<div class="inside"></div>
</div>
I would assume the inside div would have some data from the scope displayed? If the data is an empty string of null, then you can check that with ng-hide in the parent. Something like the below perhaps?
<div ng-hide='myData == null' class="item"> <!-- item should be hidden -->
<div class="inside">{{myData}}</div>
</div>
Related
I have a page with two tabs and in one of them I have a clickable component that is supposed to change a scope attribute that represents a class. The class content changes is working fine but it is not applying the effect of the class, just when I switch from this tab to another one and come back. Then, when I switch back it applies the CSS class changes.
<!-- Element 1 -->
<div ng-class="{ '{{scopeAttibute}}': true }">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
I solved it replacing the ng-class for id and the classes for IDs in my CSS style. Like this:
<div id="{{scopeAttibute}}">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
First you have to set scopeAttribute = true
<!-- Element 1 -->
<div ng-class="{'scopeAttibute': scopeAttibute == true}">
content
</div>
I am working with angularJS ng-repeat. So, I want to use my ng-repeat value in another div. I am doing the following. But it doesn't loop through and give me the exact value.
Code in ng-repeat
<div uib-slide index="$index" class="uibSlider" ng-repeat='id in code' ng-click="$parent.ContentId = id.ContentId" ng-class="{'selected' : ContentId.Id === ContentId}">
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
Code in Another Div
<div>
<label>{{(code| filter: {Id: ContentId}: true)[1].ContentId}}</label>
</div>
So, the problem is I have bunch of data and in the another div if I make the array value from 0 to 1. i'm getting null value. But automatically the value isn't changing based on what I contentID select. It always gives me the same value. I'm not sure where I'm going wrong.
Any Help would be appreciated.
You can use ng-repeat-start | ng-repeat-end
<div uib-slide ng-repeat-start='id in code'>
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
<div ng-repeat-end>
<label>{{(id.ContentId}}</label>
</div>
If you are trying to show the same data in a modal, depending where the user clicks:
<div ng-repeat="id in code">
<!-- when the user clicks here, the modal will open. The ID will be the same as the one clicking -->
<a ng-click="openModal(id)">Open modal for id: {{id}}</a>
</div>
Then in your controller you will have a function called openModal which takes a parameter (id) that will open the modal and pass along the data.
In Angular.js we have ng-include directive. We can use it to include HTML inside DIV element.
<div ng-include src="foo/bar.html"></div>
Right now I develop an edit form where I want to change its look depending on some "mode" flag. In particular I want to hide some form group and move another to different column. I can do it using ng-show and ng-hide flags but I have redundant code.
<div class="col-md-6">
<div class="form-group" ng-hide='mode == "Edit"'>...</div>
<div class="form-group">...</div>
<div class="form-group">...</div>
<div class="form-group" ng-show='mode == "Edit"'>Redundancy</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-hide='mode == "Edit"'>Redundancy</div>
<div class="form-group">...</div>
<div class="form-group">...</div>
</div>
Can I use ng-include (or some other Angular feature) to extract Redundancy to some div and include it?
Yeah,
You can do. But why you don't use a controller ? You can create an object to manage this.
Example:
You can create an object which contains template url when init the view will check based in conditional then show inside ng-include.
There is a panel for each contact. I want to show the remove button on a specific panel only when the user mouse over that same panel.
...
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="{{contact1.id}}=true" ng-mouseleave="{{contact1.id}}=false)">
<div class="panel-heading">
REMOVE BUTTON
</div>
...
I cant get the reason why this code doesnt work.
There is 2 things in your code that can create problem. First of all, ng-show / ng-mouseneter / ng-mouseleave need an expression. So you don't need to put the {{ }}.
But it wasn't the only one problem. The fact is you were using your id to manage the show property of your item. But this expression need a boolean and you can't just erase your id with a boolean like in ng-mouseneter. To do so, you have to use an other attribute in your item, isShow for example. This will keep your id safe and you will be able to manage your view with it.
So, it give something like this :
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="contact1.isShow = true" ng-mouseleave="contact1.isShow = false">
<div class="panel-heading">
REMOVE BUTTON
</div>
....
Would be nice to see a working example, but for the start the angular directives you've used require an expressions, so try removing the {{}} from ng-mouseenter, ng-mouseleave and ng-show.
So, it should be like ng-show="contact1.id".
Try applying this. Hope it works for you.
Remove the brackets from your assignment statements.
The brackets are to render a variable. Since you're assigning, instead of ng-mouseenter="{{contact1.id}}=true" you'll want to do ng-mouseenter="contact1.id=true"
You're previous code was the equivalent of writing something like null=true, or whatever value was already assigned to contact.id. The new code assigns contact.id to the value you specified.
EDIT: You can just use a local variable.
<div class="col-sm-3" ng-repeat="contact1 in Contacts">
<div class="panel panel-success" ng-mouseenter="showButton=true" ng-mouseleave="showButton=false">
<div class="panel-heading">
REMOVE BUTTON
</div>
</div>
</div>
I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.