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.
Related
angular.module('myApp')
.component('sideNav', {
controller: function SideNavController($scope) {
$scope.navigation = {};
$scope.click = function(key) {
$scope.navigation[key] = !$scope.navigation[key];
}
},
templateUrl: 'components/side-nav/side-nav.html',
})
to be used as simply
<side-nav></side-nav>
The template is
<!-- other li items -->
<li ng-init="navigation.charts = false"
ng-click="click('charts')">
<a href="#">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
</li>
navigation.charts is correctly initialized to false and hence the li > ul is hidden. Clicking the top level li item updates the navigation object but the view does not update. I was expecting the li > ul element to get displayed.
Plunkr: https://plnkr.co/edit/UJpdFErwVUzsCd65hlW0?p=preview
Clicking on the link reloads the page and re-initializes the directive. Try modifying to:
<li ng-init="navigation.charts = false"
ng-click="$event.preventDefault(); click('charts')">
You can actually add href="javascript:void(0)"
<ul>
<li ng-click="click('charts')">
<a href="javascript:void(0)">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
This actually happens as you put href="#" which I think refresh the page.
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
This might be a simple question to some of you.
<div class="component"
ng-class="{'small': small, 'medium': medium, 'large': large, 'xlarge': xlarge}"
ng-if="component.title == 'Heading'"
ng-init="editing = false; small = false; medium = false; large = false; xlarge = false">
<input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
<h2 ng-click="editing = true" ng-hide="editing">{{component.element}}</h2>
<div ng-hide="!editing" class="textEditor">
<ul>
<li>
<a href="" ng-click="small = true">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="medium = true">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="large = true">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="xlarge = true">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
</div>
</div>
I need to add class to .component based on clicked a tag from Unordered list. I need to add class small to .component if first item is clicked, then if another item is clicked I need to remove small class and add respective class from that A tag.
Currently it adds them classes but not removing the ones that were added previously.
Basically I need to create a sort of toggle between them 4 classes
Try:
ng-class="small ? 'small' : medium ? 'medium' : large: 'large : xlarge ? 'xlarge' : ''"
I'd say use separate variable for it customClass
ng-class="customClass"
Then markup
<ul>
<li>
<a href="" ng-click="customClass = 'small'">
<span class="icon-size small"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'medium'">
<span class="icon-size medium"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'large'">
<span class="icon-size large"></span>
</a>
</li>
<li>
<a href="" ng-click="customClass = 'xlarge'">
<span class="icon-size xlarge"></span>
</a>
</li>
</ul>
(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.
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>