I have an angular model page that has an array images. In my template I have this:
<div slide="slide" ng-repeat="slide in page.images" active="slide.active">
and I have tried to have es5-shim.js imported in all orders of precedence that can be. All other browsers render it correctly , except document mode IE8 (sharepoint 2010 forces this). In that I get:
TypeError: Object doesn't support this property or method<div class="item text-center ng-isolate-scope" active="slide.active" ng-repeat="slide in page.images" slide="slide" ng-transclude ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" ng-1398662894321="121">
The result is that inside that div, an <img ng-src="{{ slide.url }}" image gets a bad URL.
If I remove es5-shim.js I get also an error about not supported indexOf for the same row. Weird thing is, ng-repeat is working elsewhere in the app where I use angular-treeview.
What type error is this, if not indexOf, and is there a way to fix it?
you are using "slide directive" => slide="slide" and another slide in ng-repeat="slide in page.images" they are conflicting.
one more suggestion, always prefix your directive.
like ct-slide (ctSlide in javascript)
Related
I have a ui grid which one its columns is 'status'.
I want that if a row contains column 'status' that equals to 'pending' it will highlight the row in green.
I gone through many threads here and havent been able to make it work yet.
I tried to do something like that:
gridOptions.rowTemplate = generateRowTemplate();
function generateRowTemplate() {
return ' <div ng-if="row.entity.status == \'pending\'" style=\'color: #26b72b;\'> </div>';
}
but that way the grid isn't generated at all.
is row.entity.status the correct way of retrieving 'status' column value?
In addition, I probably override the whole row template which isn't good.
What is the correct way of doing so?
I would recommend you to solve this with an ng-class directive on your row rather than using an ng-if and a inline style.
$scope.gridOptions.rowTemplate = '<div ng-class="{ 'green': row.entity.status === 'pending'}"></div>';
But your current code has a problem is a think the way you scape the quotes characters, according to the docs this is no needed:
return '<div ng-if="row.entity.status === 'pending'" style="color: #26b72b;"></div>';
It's fine to replace the rowTemplate, but you need to use the base template:
`<div
ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>`
I would do it like this:
gridOptions.rowTemplate = `
<div
ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{
'ui-grid-row-header-cell': col.isRowHeader,
'my-highlight-class': row.entity.status === 'pending'
}"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>`
Notice that I included one condition in the ng-class directive:
'my-highlight-class': row.entity.status === 'pending'
And answering your other question: Yes, "row.entity.columnName" is one way to get the value.
i am trying to show/hide the division based on the selection of type(using the radio button).
Following is the code for the radio buttons :
<div class="col-md-7 checkbox-inline" >
<label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" checked value="itas">ITAS</label>
<label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" value="ldap">LDAP</label>
</div>
The non-working version
Here i am trying to remove the case sensitivity while comparison. The value of the expressions
{{ (authenticationType | lowercase) == 'itas' }}
{{ (authenticationType | lowercase) == 'ldap' }}
is changing but the but the show/hide on the following div's is not working
<div ng-show="{{ (authenticationType | lowercase) == 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase) == 'ldap' }}">LDAP</div>
The working version
Here i am doing simple comparison and it is working fine.
<div ng-show="{{ (authenticationType | lowercase) === 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase) === 'ldap' }}">LDAP</div>
I am able to proceed further but i just want to know why this is happening. If anyone can put some light on it that will be very nice.
Following up on Pankaj’s answer, ng-show takes an expression (https://docs.angularjs.org/api/ng/directive/ngShow):
The ngShow directive shows or hides the given HTML element based on
the expression provided to the ngShow attribute.
The keyword here is expression. i.e., ng-show takes a javascript expression to determine whether to show or hide the element. I would normally have written this like:
<div ng-show="authenticationType.toLowerCase() == 'itas'">ITAS</div>
<div ng-show="authenticationType.toLowerCase() == 'ldap'">LDAP</div>
n.b. here epxressions are different from {{ }} which is called markup. You can compare this to the ng-src directive which takes markup and not an expression: https://docs.angularjs.org/api/ng/directive/ngSrc.
In my application, I want to display a content based on active link, Example: if the link is "new" then "abc" and if link is "view" then "xyz" should be displayed. For that, I've used following code for my application.
<li>New</li>
<li>View</li>
<span class="white-text" ng-show="{{ $route.current.activetab === 'new' }}">new</span>
<span class="white-text" ng-show="{{ $route.current.activetab === 'view' }}">view</span>
When you use {{}}, the values are interpolated, i.e. the markup is replaced with the result of the expression. ngShow expects only the expression, so just use the function as it is, and it will work:
<span class="white-text" ng-show="$route.current.activetab === 'new' ">new</span>
<span class="white-text" ng-show="$route.current.activetab === 'view' ">view</span>
In general, you'll only want {{ }} when your expression / content should be displayed.
Hope this works!
pagination-control not showing direction arrows when items Per Page is expression, I have install angular-utils-pagination using bower add dependencies in controller. please tell me what to do..
You have to make sure the controls are added on the dirPagination.tpl.html as following:
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
«
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
‹
</li>
.... repeat items here ....
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
›
</li>
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }">
»
</li>
</ul>
Also make sure the direction-links are set to true(default) on the dir-pagination-controls directive.
direction-links (optional, default = true) Specify whether to display
the "forwards" & "backwards" arrows in the pagination.
If the problem still remains, please share some more code trough a Punkr/Fiddle/... Se we can have a better insight.
I been trying to change a class if a tab in a repeat, depending in the title of the tab. snippet shown below
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{{tab.title}} === 'Logs' ? 'pull-right' : ''" active="tab.active">
<div class="col-md-12">
<div ng-include="tab.content">
</div>
</div>
</tab>
But it's not working. I tried changing the tab.title to $index.
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-class="{{$index}} === 1 ? 'pull-right' : ''">
<div class="col-md-12">
<div ng-include="tab.content">
</div>
</div>
</tab>
try with and without surrounding it with {} and {{}}. but still. nothing works.
Can anyone tell me what i'm doing wrong here?
as always, thanks for your time.
----EDIT---------
well i found a post where there was a workaround. don't know what happen. but it works.
snippet shown below
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" class="{{ tab.title == 'Logs' ? 'pull-right':'' }} ">
<div class=" col-md-12">
<div ng-include="tab.content">
</div>
You should use this syntax for the ng-class. First the class name you want to set, second the condition to check for. Once it matches the condition, the class name will be added.
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" ng-class="{ 'pull-right': tab.title == 'Logs' }" active="tab.active">
<div class="col-md-12">
<div ng-include="tab.content">
</div>
</div>
</tab>
As said in the docs, value of ng-class is an expression that can be evaluated to a string, an object, or an array. That means you don't have to use {{}} there: simple...
ng-class="tab.title === 'Logs' ? 'pull-right' : ''"
... should suffice. In fact, it's cleaner to write it as an object:
ng-class="{'pull-right':tab.title === 'Logs'}"
Sadly, that won't solve your case, as you're trying to apply ng-class to a custom directive (created with angular-ui Bootstrap package). That directive uses ng-class in its own template:
<li ng-class="{active: active, disabled: disabled}">
<a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
</li>
... and it's created with replace flag set to true. This effectively means value of ng-class supplied by you will be glued together with value supplied by template, resulting in something ugly like:
<li ng-class="tab.title === 'Logs' ? 'pull-right' : '' {active: active, disabled: disabled}">
That certainly won't work as planned. In fact, there's a related issue (#1741) registered at the project's hub - which is closed with the following commentary:
Using ng-class on a directive that uses replace: true is a very bad
idea. There are numerous issues around replace: true and even talk of
deprecating/removing it. But, unfortunately, it's not going anywhere
soon and the caveat released by the core Angular team was that use it,
but do so at your peril. I.e., use it knowing that doing so
incorrectly can break your DOM.
I suspect this issue will not be addressed.
One possible workaround is using native class with an Angular expression supplied as its value:
class="{{tab.title === 'Logs' ? 'pull-right' : ''}}"
This won't be merged with a <tab> template class, as there's no such thing there - and you're clear to go!