I am trying to load directive inside another directive dynamically, so I am trying to use ng-repeat for the below, where {{item.directiveName}} is the inner directive name.
<card ng-repeat="item in items" {{item.directiveName}} title="{{item.title}}">
The problem is that the {{item.directiveName}} is not evaluated, it stays as it is. I think because it is not a value of an attribute, it is an attribute.
Is there any way for this expression to be evaluated or this is not supported by angularjs?
This should do it, depending on the card directive.
<div ng-repeat="item in items">
<card {{item.directiveName}} title="{{item.title}}"> </card>
</div>
try to assign it to an attribute
<card ng-repeat="item in items" data="{{item.directiveName}}" title="{{item.title}}">
<card ng-repeat="item in items" myAttr="{{item.directiveName}}" title="{{item.title}}">
Related
What i'm trying to do is similiar to an accordion.
Simple put
i have an ng-repeat with an <a> tag that once clicked show another div called "Printpanel" nested inside it within ng-show.
If the user cick to another <a> tag, i want to hide all other div showed before, and open only to that one related.
I am using $index to trigger the specific div.
Here what i have done:
<div ng-repeat="product in $ctrl.Products">
<a href="#" ng-click="showDetails = $index;>CONFIGURE</a>
<div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
</div>
it seems that ng-hide is not recognized... Anybody have an idea?
You don't need to use ngShow + ngHide: one is enough.
<div class="Printpanel ng-hide" ng-show="showDetails == $index">
You can use ng-if also:
<div class="Printpanel" ng-if="showDetails == $index">
EDIT:
due to scope inheritance problem, you are not able to set showDetails variable. use $parent for that.
working example:
<div ng-repeat="product in $ctrl.Products">
CONFIGURE
<div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>
seems you have missed closing double quotes here ng-click="showDetails = $index;
Also either of one you need to use ng-show/ng-hide/ng-if = expression
I was wondering if it is possible to have an ng-if be true if an element has a certain class.
Example:
<div class="edge" ng-repeat="item in items">
<div ui-view ng-if="(ng-repeat div has class of edge)"
Practically you can use hasClass method with angular element:
angular.element(myElement).hasClass('my-class');
So you can create a function and put the check in it and use that function in ng-if.
<div class="edge" ng-if="check()" ng-repeat="item in items">
However, remember that you cannot access the element in ng-if (vs you can pass the $event to ng-click and access $event.target) , need to create a directive to do it.
I want to create a directive which includes a ng-repeat and I need to bind an event to a contained tag inside the ng-repeat like the "test-class"
<div>
<div ng-repeat="row in ctrl.items">
<div>
<p ng-bind="row.Text"></p>
<a class="test-class"></a>
</div>
</div>
</div>
but my problem seems to be that in the link function the "element" property seems to contain only the ng-repeat and so I can't find the "test-class" within the element because its not there in the link function, that makes sense.
But how can I then access the dom and bind some custom events to the "a" in my example.
The only solution I had is to create two directives one with the ng-repeat and the other with the content inside the ng-repeat. Do I miss something or is this the only possible solution for my problem?
Directive with name "DirectiveContent":
<div>
<p ng-bind="row.Text"></p>
<a class="test-class"></a>
</div>
Then the new complete Directive:
<div>
<div ng-repeat="row in ctrl.items">
<directive-content></directive-content>
</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.
I have a lot of data within ng-repeat. It looks like table with many rows and columns. I want to put ng-click directive on some of cell of table.
Can i put some condition before ng-click directive? If this condition is true - I want to put the directive, otherwise - not to put.
I think you should just put the directive in there and pass it a condition as a parameter which returns boolean. In the directive compile function check if your parameter is right and decide from there what you load.
Maybe this is what you were looking for?
<ul class="menuItems">
<li ng-repeat="item in menuItems">
<div ng-if="item.type == 'link' ">
{{item.name}}
</div>
<div ng-if="item.type == 'function' ">
<span ng-click="function(item.command)" title="item.description">{{item.name}}</span>
</div>
</li>
</ul>