In AngularJS, how can I do what the following code is trying to achieve, i.e. hide a span if task.status is set to a specific value?
<li ng-repeat="task in tasks">
Move to:
<span ng-hide="task.status=todo">Todo</span>
<span ng-hide="task.status=doing">Doing</span>
<span ng-hide="task.status=done">Done</span>
</li>
<li ng-repeat="task in tasks">
Move to:
<span ng-hide="task.status == todo">Todo</span>
<span ng-hide="task.status == doing">Doing</span>
<span ng-hide="task.status == done">Done</span>
</li>
or
<li ng-repeat="task in tasks">
<div ng-switch on="task.status" >
<span ng-switch-when="todo">Todo</div>
<span ng-switch-when="doing">Doing</div>
<span ng-switch-when="done">Done</div>
</div>
</li>
Related
How can I toggle a class in ng-repeat when onclick each item.My code does not work.Thank you,
This is my code.
<a class="list-group-item" ng-repeat="connect in Connected" ng-click="getChat(connect.TokenId, connect.SessionId); getOnline(connect.SupportId, connect.TokenId, connect.SessionId, connect.CreateTime); onClickTab(connect.TokenId)" ng-class="{'active': $index == selectedIndex}" ng-init="$first && getChat(connect.TokenId, connect.SessionId); $first && getOnline(connect.SupportId, connect.TokenId, connect.SessionId, connect.CreateTime)">
<h4 class="list-group-item-heading"><strong ng-bind="connect.SupportId"></strong></h4>
<ul class="list-unstyled">
<li><strong>Token ID :<strong ng-bind="connect.TokenId"></strong> </li>
<li>
<strong>Online :</strong>
<span class="Connect" ng-if="connect.SessionId != undefined" class="ConnectIcon"><div class="ConnectIcon"></div></span>
</li>
<li><span>Chat Duration: </span> <strong ng-bind="connect.CreateTime | DateGap"></strong></li>
</ul>
</a>
in my controller:
$scope.onClickTab= function(x){
$scope.selectedIndex= x;
};
You should use
onClickTab($index)
not the id.
I have a plunker example with this plugin
Angular Multi Level Menu
Index.html
<input type="text" ng-model="search">
<wxy-push-menu menu="menu" options="options"></wxy-push-menu>
SubMenu.html
<div ng-show="visible" ng-class="{visible: visible, multilevelpushmenu_inactive: inactive && !collapsed}" class="levelHolderClass">
<h2><i class="floatRight cursorPointer" ng-class="menu.icon" ng-click="openMenu($event, menu)"></i>{{menu.title}}</h2>
<div ng-show="level != 0 && !inactive" ng-class="options.backItemClass">
<a href="#" ng-click="goBack($event, menu)">
<i class="floatRight" ng-class="options.backItemIcon"></i><span ng-bind="options.backText"></span>
</a>
</div>
<ul ng-class="{invisible: inactive}">
<li ng-repeat="item in menu.items | filter: search">
<a ng-href="{{item.link}}" ng-click="onSubmenuClicked(item, $event)">
<i ng-if="item.menu" class="floatLeft iconSpacing" ng-class="options.groupIcon"></i>
<i class="floatRight" ng-class="item.icon"></i>{{item.name}}
</a>
<div ng-if="item.menu">
<recursive><wxy-submenu menu="item.menu" level="childrenLevel" visible="item.visible"></wxy-submenu></recursive>
</div>
</li>
</ul>
Any idea why the filter not work?
Plunker Code
I have dropdown-toggle in page. I am using AngularJS. I want to open it automatically when page loads. Here is my code:
<div class="item dropdown customdrop" >
<a href="#" class="dropdown-toggle" >
<img src="img/bell.png"> <span class="toggle-username">Alerts <i class="fa fa-caret-down"></i></span>
</a>
<ul class="dropdown-menu dropdown-menu-left" >
<li class="dropdown-header">Notifications</li>
<li class="divider"></li>
<li>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
<div> <span class="text-left ndata"> Notifications </span> <span class="text-right"> 5</span></div><br>
</li>
</ul>
</div>
You need to add the is-open option to the dropdown:
<div class="item dropdown customdrop" is-open="status.isopen">
And your controller should set it to be opened by default:
.controller('MyCtrl', function ($scope) {
$scope.status = {
isopen: true
};
});
(please do not update the english grammer in this question/ I wont be able to approve it and this question wont get resolved.)
This is my UI
It contains various li elements whose values are populated using this angular html
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a <a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
It uses the nested ng-repeat.
The whole UI is contained within a one controller ( no directives used)
the following code gets triggered when someone clicks the blue lis.
$scope.itemClicked = function ($index) {
console.log($index);
// console.log($(item).closest('li') );
$scope.selectedIndex = $index;
};
here's how to ui looks and its great.
problem arises when I try to do the same logic for the pink ones (nested ng-repeat li). It selects other pink lis in all the other stack too.
here's the screenshot.
second part of question:
I have I have the above UI plus I also have this second UI that is loaded along with this on the same page. It contains a bunch of horizontal rows.
Once the user click the blue pink colored lis it goes into the active state. Then the user can click the row which he likes. upon clicking it the plan name of currently selected li will get replaced.
Here is the html for it.
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
The problem lies in the fact that you are trying to save the state of the data (which one is selected) inside your controller using $index. The $index property isn't unique among different ng-repeats, so when you set your $scope.selectedIndex to $index, each of your sub lists will see that their $index matches, and so will each trigger the ng-class and add the selected-class-name class.
What you could do instead is have each item in the data have a unique index and use that id to store which item is selected in $scope.selectedIndex.
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': item.id == selectedIndex }" ng-click="itemClicked(item.id)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
This line looks strange.
<a ng-click="select('one')" href="">
Did you really mean to pass a hardcoded 'one' to the function? Or was it supposed to be the index, like the deleteClick() call.
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post