#angular/upgrade/static
I am trying to upgrade an AngularJS controller to Angular context using UpgradeModule from '#angular/upgrade/static'
When I change ng-show to ng-if on span or div the enclosed content does not display as expected
Using the stackbliz code is easier to see the issue,
https://stackblitz.com/edit/angular-xcqzsy
Angular CLI: 7.0.6
Node: 9.5.0
OS: win32 x64
Angular: 7.0.4
npm: 5.6.0
I am trying to use use AngularJS component in Angular application, and in the issue in this markup is, the contained span block with ng-repeat does not display, If I change the ng-if on the parent div to ng-show then the inner markup appears as expected
<div ng-if="vm.showMe == 'SHOW_ME'">
<span ng-repeat="col in vm.colCollection">
<h4 title="{{col.appName}}">Testing: {{col.appName}}</h4>
</span>
</div>
This will working same as ng-show.
<span ng-if="vm.allowed" ng-repeat="col in vm.colCollection">
<h4 title="{{col.appName}}">Testing: {{col.appName}}</h4>
</span>
Related
I cannot get the tooltip display translated value (using angular translate) from an object in ng-repeat loop:
<div ng-repeat="type in types">
<div>
<span ng-bind-html="type.icon"></span>
<label style="font-size: 20px;">{{type.nameNormal | translate}}</label>
<i class="fa fa-info-circle"
tooltip-class="custom-tooltip"
uib-tooltip="{{'type.descriptionNormal' | translate}}"
tooltip-placement="bottom"></i>
<hr class="hr-no-background">
</div>
</div>
P.S. UI Bootstrap version: 0.13.4
Angular: 1.4.4
if you are using 0.13.4 of ui bootstrap the directives are not prefixed with the 'uib' prefix yet
see http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/tooltip for details
Ok, for those, who will face equal problem in the future: I just didn't put any value into my translation file for the descriptionNormal.
Example:
type.descriptionNormal = "DESCRIPTION"
Translation file:
"DESCRIPTION": ""
This was the case. Now everything work fine.
So it seams the tooltip doesn't get displayed if the value is empty.
I am using Angular UI Typeahead with a custom template. When one is not using a custom template, the out of the box directive highlights the matching term. However, when one uses a custom match template, the match highlighting is not working.
I created a plunk with an example of the issue. Angular Typeahead Highlighting Plunk
Below is my custom template: MatchTemplate.html
<div>
<span class='type'>{{match.model.type}}</span>
<span class='name'>{{match.model.name}}</span>
</div>
Any help is appreciated.
You can use the typeaheadHighlight filter in your template:
<div>
<span class='type' bind-html-unsafe="match.model.type"></span>
<span class='name' bind-html-unsafe="match.model.name | typeaheadHighlight:query"></span>
</div>
You have to use bind-html-unsafe as this filter generates HTML (<strong> tags around the match).
See plknr.
You're not using the typeaheadHighlight filter (requires bind-html).
A working example would be
<div>
<span class='type' bind-html-unsafe="match.model.type | typeaheadHighlight:query"></span>
<span class='name'>{{match.model.name}}</span>
</div>
See the original match template -> https://github.com/angular-ui/bootstrap/blob/master/template/typeahead/typeahead-match.html
i try use ng-if, but angular no compile him. Look in test code:
<ul class="tmmenu-admin-tabs-builder-panel-answer">
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
<div>
<span ng-repeat="question in questions">
<label ng-repeat="answer in question.answers">
<input type="checkbox">{{question.id}}.{{answer.id+1}}
<span ng-if="test()">ddd</span>
</label>
</span>
</div>
<textarea>{{answer.text}}</textarea>
</li>
</ul>
and function test:
$scope.test = function(){
console.log('d');
return false;
}
if run this page, we can see "ddd" in "Li" despite to test return false.
Next step, i replaced at "ng-if" "ng-show" :
<ul class="tmmenu-admin-tabs-builder-panel-answer">
...
<span ng-show="test()">ddd</span>
...
</ul>
And its working, "ddd" hide. Why ng-if not working where working ng-show?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?
Try changing your tag to this to help debug and you should see that it is a function:
<span ng-if="test()">test is: {{test.toString()}}</span>
I am doing Angularjs project and I need to freeze a div in that depend on a condition. I tried to use ng-disabled but Its not freezing a div for me. This is the code
<div ng-repeat="item in list.items" ng-disabled="true">
Help would be really appreciated.
Edited :
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
now I have another problem, As you guys suggested me I can change the css. But the problem is every div has got a ng-click So even if it is look like disabled in css it will call to the function. So how can I prevent it?
Thanks in Advanced.
if you are using bootstrap3, you can use text-muted class if the div contains text and apply styles based on a condition
<div ng-repeat="item in list.items" ng-class="{'text-muted':item.myCondition}">
the DIV element doesnt support the disabled attribute.
or you can use css to make the div element support that attribute.
<div ng-repeat="item in list.items" ng-disabled="item.myCondition">
css
div[disabled]{
color:grey;
}
You are trying to use ng-disabled in DIV which in invalid. You can achieve this by applying css class conditionally like this.
<div class="box" ng-repeat="item in items" ng-class="{'disable-mode':item%2==0,'normal-mode':item%2!=0}">
</div>
Working Demo
Is there a way to use an ng-if directive without adding a containing element? I'm playing around with dynamic menu items placed by the current view controller and want to handle a dropdown type and non dropdown type, however the ng-if has to be in some kind of element which breaks the bootstrap css.
Here's an example of what I'm trying to do:
<li ng-repeat="item in dynNavList">
<div ng-if="item.dd" ><!--There will be more stuff in here-->
Dropdown test {{item.title}}
</div>
<span ng-if="!item.dd">
NoDropDown {{item.title}}
</span>
</li>
Any nav item created in that html above doesn't style correctly in the navbar because it's inside a div or span element so the css doesn't apply.
I do not want to modify the bootstrap css to get this working and I'm trying to avoid writing any custom directives if possible.
Any suggestions?
ng-if directly on the anchor is fine, demo.