Is it somehow possible to "disable" a custom directive in Angular if an ng-select located within that directive receives an empty array?
Namely, consider the following code that creates an expand-collapse area on the page. I populate the content area of the area with a list of things. Now, sometimes there are items on the list, yet in other cases the list is empty. The problem is that when the list is empty, the custom directive still leaves a "+" sign on the page to indicate expandability. It is bad tone to keep it there and not have anything come up when the user clicks on it. How could I disable this directive entirely or get rid of the "+" created by it when the list is empty? The latter is my ultimate goal in this case.
<span ng-controller="ListChildren">
<v-accordion class="vAccordion--default" style="width:80%; margin: auto">
<v-pane>
<v-pane-header>
</v-pane-header>
<v-pane-content>
<span ng-repeat="child in childs">
<a href="/#/activity/{{child._id}}" class="btn btn-warning btn-block badge" ng-style="{'background-color' : child.color, 'color' : child.colorTitle, 'border-color' : child.colorBorder}" ng-class="{'pulsation' : pulse , 'nonpulsation' : !pulse}" ng-init="pulse = false">
{{child.title}}
<span class="badge" ng-style="{'background-color' : child.colorSupport, 'color' : child.colorFont}">Current: {{counter | secondsToHHmmss }}</span>
<span class="badge" ng-style="{'background-color' : child.colorSupport, 'color' : child.colorFont}">Total: {{child.totalTime | secondsToHHmmss }}</span>
</a>
<a ng-click="toggle =!toggle; $parent.pulse = !$parent.pulse; toggleTimer()" ng-class="{'glyphicon glyphicon-pause' : toggle , 'glyphicon glyphicon-play-circle' : !toggle}"></a>
</span>
</v-pane-content>
</v-pane>
</v-accordion>
</span>
Working code:
<span ng-controller="ListChildren">
<v-accordion class="vAccordion--default" style="width:80%; margin: auto" ng-if="childs.length > 0">
<v-pane>
<v-pane-header>
</v-pane-header>
<v-pane-content>
<span ng-repeat="child in childs">
<a href="/#/activity/{{child._id}}" class="btn btn-warning btn-block badge" ng-style="{'background-color' : activity.color, 'color' : activity.colorTitle, 'border-color' : activity.colorBorder}" ng-class="{'pulsation' : pulse , 'nonpulsation' : !pulse}" ng-init="pulse = false">
{{child.title}}
<span class="badge" ng-style="{'background-color' : activity.colorSupport, 'color' : activity.colorFont}">Current: {{counter | secondsToHHmmss }}</span>
<span class="badge" ng-style="{'background-color' : activity.colorSupport, 'color' : activity.colorFont}">Total: {{activity.totalTime | secondsToHHmmss }}</span>
</a>
<a ng-click="toggle =!toggle; $parent.pulse = !$parent.pulse; toggleTimer()" ng-class="{'glyphicon glyphicon-pause' : toggle , 'glyphicon glyphicon-play-circle' : !toggle}"></a>
</span>
</v-pane-content>
</v-pane>
</v-accordion>
</span>
Related
I am getting 3 values from the backend : isDone, isInProgress, isFailed and based on these 3 values, i need to change the hover over text of a span element in angularview. if the element is isDone or isInProgress, i have to show one icon with 2 different hover text. if the element is isFailed , i have to show an error message on the screen:
The code :
<span class="glyphicon glyphicon-refresh blue"
title="In progress" ng-show="action.isInProgress"> </span>
How do i incorporate the IsDone in this span?
Just do this:
<span class="glyphicon glyphicon-refresh blue" title="{{ action.isInProgress ? 'Action is in progress' : 'Action is complete.'}}" ng-show="action.isInProgress||action.isDone"></span>
what about
<span class="glyphicon glyphicon-refresh blue"
title="{{status}}" > </span>
and update your status variable depending on the value, as "In progress", or ..
You can use conditional checks
<span class="glyphicon glyphicon-refresh blue"
title=" Action is Complete" ng-if="action.isDone"> </span>
<span class="glyphicon glyphicon-refresh blue"
title="Action in progress" ng-if="action.isInProgress"> </span>
I'm trying to add some items in the list using material icon. Here items are adding permanently by ng-click="contactDetails.contactModes.push(numbers);".
I have given 2 buttons on bottom of the card i.e save and discard. but problem is whenever material icon is clicked values get added in the list. Means No use of discard. My aim is to add values temporary on the list so that when ever user click on saved then only values get saved otherwise discarded.
Please suggest
MY CODE:
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" ng-click="contactDetails.contactModes.push(numbers);">
<i ng-show="numbers.type == 'sample'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right">add</i>
</md-list-item>
Please suggest.
I have used Temporary variable in controller
$scope.arrayText = [{
"type": "sample",
"value": "test"
}];
and made following changes in the code to add temporary and finally using contactDetails.contactModes = arrayText on ng-click added permanently using save button
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList" >
<i ng-show="numbers.type == 'TruliaCare'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<img class="pad-right-5 md-avatar dime-30" ng-show="numbers.type == 'PAGER'" src="assets/img/contact-pref/pager.png" width="26" style="width:30px;height:28px;margin-left: 5px;">
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="arrayText.push(numbers);">add</i>
</md-list-item>
I'm working in contact card. I need to add Name and contact number in the list. But the condition is Name and contact must be added only 2 times. for ex.
Contact Card-1
Name-A
Name-B
Contact-1
Contact-2
Whenever I click on the button my name and contact get added in the list but with certain condition.
My code is
<md-list-item ng-show="showContactList" class="md-2-line" ng-repeat="numbers in contactList track by $index" >
<i ng-show="numbers.type == 'test'" class="material-icons md-avatar-icon">textsms</i>
<i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'" class="material-icons md-avatar-icon">phone</i>
<div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
<h3> {{ numbers.type }} </h3>
<p> {{ numbers.value }} </p>
</div>
<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="arrayText.push(numbers);">add</i>
</md-list-item>
You can use:
<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
<p>{{item.id}}</p>
</div>
{visible- true} will return a list of all visible items
You can take a look at the angularjs docu for more information on the filter filter. http://docs.angularjs.org/api/ng.filter:filter
I have the following button in the template:
<button ng-if="downloadInProgress != true"
ng-click="downloadData()"
class="button button-full button-outline button-positive welcomeButton">
{{ 'DOWNLOAD_SOUNDS' | translate }}
</button>
And i would like to change the text:
{{ 'DOWNLOAD_SOUNDS' | translate }}
to
{{ 'DOWNLOADING' | translate }} {{ downloadProgress}} {{ '%' | translate }}
If the value
downloadInProgress == true
Now i'm using two buttons in the template and show/hide one from them in order of the variable value:
<button ng-if="downloadInProgress != true"
ng-click="downloadData()"
class="button button-full button-outline button-positive welcomeButton">
{{ 'DOWNLOAD_SOUNDS' | translate }}
</button>
<button ng-if="downloadInProgress == true && (downloadProgress >= 0 && downloadProgress < 100)"
class="button button-full button-outline button-positive welcomeButton">
{{ 'DOWNLOADING' | translate }} {{ downloadProgress}} {{ '%' | translate }}
<ion-spinner class="spinner-positive welcomePageDownloadProgressSpinner" icon="spiral"></ion-spinner>
</button>
But i think that this approach is not good way, because if the value is changing i noticed that buttons are blinking if are changed.
Is it possible it to solve it with using only the one button?
Many thanks for any advice.
{{ (!downloadInProgress ? 'DOWNLOAD_SOUNDS' : ('DOWNLOADING' + downloadProgress +'%')) | translate }}
I guess the downloadInProgess is available to the current scope
I would recommend that you do the following:
<button class="button button-full button-outline button-positive welcomeButton"
ng-click="downloadData()">
<span translate="downloadProgress ? 'DOWNLOADING' : 'DOWNLOAD_SOUNDS'"
translate-values="{progress: downloadProgress}"></span>
<ion-spinner class="spinner-positive welcomePageDownloadProgressSpinner"
ng-if="downloadProgress >=0" icon="spiral"></ion-spinner>
</button>
Using the translate tag will prevent that the translation keys gets rendered on the button while loading your translation keys.
Since you are translating you should use keys with values and use the translation-values tag for filling them. Since there are several languages that would not order the words in the same way.
Your key could look something like "DOWNLOADING": "Downloading: {{progress}}%",
On controller:
$scope.buttonText= 'DOWNLOAD_SOUNDS';
HTML
<button ng-click="downloadData()"
class="button button-full button-outline button-positive welcomeButton">
{{ buttonText | translate }}
</button>
In your function change the value in scope
$scope.buttonText= 'DOWNLOADING' + somevalueofpercent + '%';
It will automatically change the text of button and on completing change the text something else
<span ng-if="ItemIndex.ItemCount>0"><a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i> Remove items</a>
</span>
If I have more than 0 item, text getting 'Remove items', right. But I want, if I have one item, text change to 'Remove item'
So,
item == 1 == remove item
item > 1 == remove items
How can I setup this?
use like this,
<span ng-if="ItemIndex.ItemCount>0">
<a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i>
{{ (ItemIndex.ItemCount == 1) ? 'Remove item' : 'Remove items' }}
</a>
</span>
if (ItemIndex.ItemCount == 1) is true then prints Remove item, else prints Remove items.
OR you can use ng-show, ng-hide or ng-if,
<span ng-if="ItemIndex.ItemCount>0">
<a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i>
<span ng-show="ItemIndex.ItemCount == 1"> Remove item </span>
<span ng-show="ItemIndex.ItemCount > 1"> Remove items </span>
</a>
</span>