I want ng-class to have a condition and a function call. How do I make the changes necessary to:
<li ng-repeat="t in tabs" ng-class="{'active1':t.active,clickmenu(t.route)}" ng-click='clickMainMenu($index,t)'><div class='custom-menu-li' >{{t.heading | translate }}</div>
</li>
so as to make ng-class have a condition and a function in one ng-class directive.
controller.js
$scope.isActive = function(t) {
if (t.active) {
clickmenu(t.route);
return true;
}
}
template.html
<li ng-repeat="t in tabs"
ng-class="{'active1': isActive(t)}"
ng-click='clickMainMenu($index,t)'>
<div class='custom-menu-li' >{{t.heading | translate }}</div>
</li>
NOTE: This is not the ideal thing to do. Your clickmenu will get called for every digest cycle.
You can do like this using &&:
<li ng-repeat="t in tabs" ng-class="{'active1':t.active && clickmenu(t.route)}" ng-click='clickMainMenu($index,t)'><div class='custom-menu-li' >{{t.heading | translate }}</div>
</li>
Related
I am new to AngularJS. I want to create links for elements in the array. Suggest me some code or descriptives.
app.js
app.controller('ItemsController', function($scope) {
$scope.message = 'Items are displayed';
$scope.items=['Appliances','Books','Cosmetics','Home & Furniture','Mens','women','kids'];
});
items.html
<div ng-controller="ItemsController">
<p><h1>Type a letter in the input field:</h1></p>
<p><input type="text" ng-model="test"></p>
{{message}}
<ul><h2>
<li ng-repeat="x in items| filter:test">
{{ x }}
</li>
</h2></ul>
</div>
Here is the sample output for the above code. Items displayed in the output should be links.
If you are using routing then just create an anchor tag in the li.
<ul>
<h2>
<li ng-repeat="x in items| filter:test">
{{x}}
</li>
</h2>
</ul>
In the route configuration, just handle the specific route pertaining to the item. Like if you want to display the details for the item.
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/details/:item',{
templateUrl:'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo : 'yourdefaultpath'
})
Item shall be available in your controller as a routeParam and then you can display your data accordingly.
Hope this helps.
You can use ui-sref and declare your items as states using ngRoute in your app, this is how would be your code:
<ul>
<li ng-repeat="x in items| filter:test">
<a ui-sref="{{x}}"><h2>{{ x }}</h2></a>
</li>
</ul>
Update your JS to add the states, like this:
app.config(function($stateProvider) {
$stateProvider.state('Appliances', {
url: 'Appliances',
templateUrl: 'app/views/appliances.html'
});
});
I want to list an item inside a specific key using a filter. Now listing like this.
Sanal
Jin
John
Tim
Jeff
Sam
John
Tim
I want like this using a filterJeffSam
Here is the Fiddle
function testCtrl($scope) {
$scope.items = {"id":"B716","day":8,"di":{"type":"normal","one":[{"name":"Sanal","age":"18"},{"name":"Jin","age":"25"}],"two":[{"name":"Jeff","age":"55"},{"name":"Sam","age":"32"}],"three":[{"name":"John","age":"34"},{"name":"Tim","age":"39"}]}};
}
<div ng-app="" ng-controller="testCtrl">
<ul>
<li ng-repeat="val in items.di">
<ul>
<li ng-repeat="value in val">{{value.name}}</li>
</ul>
</li>
</ul>
</div>
in your ng repeat change it as
<li ng-repeat="value in val | filter: val.name='jeff'">{{value.name}}</li>
I have used name you can use the value that you want ot test
I have the following code in my HTML View:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li>
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
The items is a JSON Object. Every item has a shop_id that has to be used to do the sorting.
According to the documentation, I understand that I cannot use the if control statement in an Angular Expression to achieve what I the sort. How else can I use the control statement.
I tried this, but it obviously failed because we cannot return a continue.
//var resources.items and resources.shops are JSON objects output from a database
//This file is app.js
$scope.itemName = function(itemIndex, shopIndex) {
for (var i = 0; i < resources.items.length; i++) {
if (resources.items[itemIndex].shop_id == resources.shops[shopIndex].id)
return resources.items[itemIndex].name;
};
return continue;
}
And, this in the view:
<div class="tab-content" ng-repeat='provider in providers'>
<ul ng-repeat='item in items'>
<li>{{itemName($index, $parent)}}</li>
</ul>
</div>
I'm a beginner in Angular. Please help out.
Use the ngIf directive:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li ng-if="item.shop_id === shop.id">
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
I have a very strange issue. I have to set an active class on the appropriate <li> when the $scope.selectedCat == cat.id. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is set to active. setCat() sets the value of the $scope.selectedCat variable:
<div id="cat-list" ng-controller="CatController">
<li ng-class="{'active': {{selectedCat == false}}}">
<a>
<div class="name" ng-click="setCat(false)" >Browse All Categories</div>
</a>
</li>
<li class="has-subcat" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': {{selectedCat == cat.id}}}">
<a>
<div cat class="name" ng-click="setCat({{cat.id}})" ng-bind-html="cat.name | highlight:catsearch"></div>
</a>
</li>
</div>
When the page loads, everything works fine (snapshot from FireBug):
<li ng-class="{'active': true}" class="ng-scope active">
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': false}">
However when I set $scope.selectedClass to a cat.id value, the condition within ng-class gets evaluated correctly, but ng-class won't update the classes accordingly:
<li ng-class="{'active': false}" class="ng-scope active"> <!--Right here!-->
<!-- ngRepeat: cat in cats | filter:catsearch -->
<li class="has-subcat ng-isolate-scope" ng-repeat="cat in cats | filter:catsearch" ng-class="{'active': true}">
Please note that in the first line active class stays set, while ng-class evaluates to false. In the last line active is not set, while ng-class evaluates to true.
Any ideas why it doesn't work? What's the correct Angular way of doing this?
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
You never need to nest those curly braces like that, in Angular.
Have a look at the ng-class documentation for some more examples.
Instead of
ng-class="{'active': {{selectedCat == cat.id}}}"
use
ng-class="{active: selectedCat == cat.id}"
Hi i'm also facing the same problem. i solved the problem by the way instead of assigning the value directly to ng-class, call the separate method and return the value.
ex :
ng-class="getStyleClass(cat)"
$scope.getStyleClass = function(cat) {
return "active: selectedCat == cat.id";
}
roughly i coded. please change the method as per your requirement.
Expanding on the answer #Cerbrus gave:
Replace:
ng-class="{'active': {{selectedCat == cat.id}}}"
With:
ng-class="{'active': selectedCat == cat.id}"
I had an issue with an expression using a filter, that would not evaluate properly without double curly braces {{ }}.
Example: ng-class="{'active': {{ selectedCat | filter:catType }} == cat.id}"
I solved it by putting parentheses instead of curly braces.
Solution: ng-class="{'active': ( selectedCat | filter:catType ) == cat.id}"
Did you solve it?
In my opinion you should use
ng-class="{'active': {{controller.selectedCat == cat.id}}}"
With:
ng-class="{'active': controller.selectedCat == cat.id}"
this will help you.
I am using AngularJS and its ng-repeat directive to display a sequence of questions. I need to number each question starting with 1. How do I display and increment such a counter with ng-repeat? Here is what I have so far:
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Angularjs documentation is full of examples, you just need to take some time and explore it.
See this example here : ngRepeat example , it's the same case.
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{$index + 1}} {{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Reached here by searching for something similar.
Here is what worked for me.
{{$index + 1}}
+1 is added because the index starts from 0.
There are two ways to get an index for the given array in ng-repeat
Using $index
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
Using a counter
This method is useful when you have nested ng-repeat and you need counters for both loops...the following example uses counter row. Although track by $index is required, it is not used for the logic.
<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
<td>{{row+1}}</td>
In both cases counter starts with 0 and you can offset using +1 if you like