<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>
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
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>
Here is the currently section of TH-Tags in the view:
...
<th>
<a href="" ng-click="sortReverse = !sortReverse; order('fname',sortReverse)">
Firstname
<span ng-show="sortType=='fname' && !sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
<span ng-show="sortType=='fname' && sortReverse" class="glyphicon glyphicon-triangle-top"></span>
</a>
</th>
...
And that was my first solution but it doesn't work:
<th ng-repeat="tblOpt in tableOptions">
<a href="" ng-click="sortReverse = !sortReverse; order({{ tblOpt.sortTypeVal }},sortReverse)">
{{ tblOpt.columnTitle }}
<span ng-show="sortType=={{ tblOpt.sortTypeVal }} && !sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
<span ng-show="sortType=={{ tblOpt.sortTypeVal }} && sortReverse" class="glyphicon glyphicon-triangle-top"></span>
</a>
</th>
Ctrl:
var orderby = $filter('orderBy');
/*Sorting the columns*/
$scope.order = function (sortType, sortReverse) {
$scope.nameslist = orderby($scope.nameslist, sortType, sortReverse);
};
/*Definition for TH-tags*/
$scope.tableOptions = [
{
columnTitle: 'Firstname',
sortTypeVal: 'fname'
},
...
]
I want to have the description in my Ctrl how you can see above in the example. Also the glyphicons don't displayed in the TH-Tags.
No need of {{}} inside ng-click or ng-show
Try this :
<th ng-repeat="tblOpt in tableOptions">
<a href="" ng-click="sortReverse = !sortReverse; order(tblOpt.sortTypeVal,sortReverse)">
{{ tblOpt.columnTitle }}
<span ng-show="sortType == (tblOpt.sortTypeVal && !sortReverse)" class="glyphicon glyphicon-triangle-bottom"></span>
<span ng-show="sortType == (tblOpt.sortTypeVal && sortReverse)" class="glyphicon glyphicon-triangle-top"></span>
</a>