i create simple application. And i add rating feature.
I want to change the rating star class when click event is triggered from controller.
In my Controller i check if the rating of object == passed number from view, i return class name active.
After that, i still confused how i pass my return value.
Here is my View
<h3>{{ fruit.title }}</h3>
<div class="rating">
<ul>
<li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
</ul>
</div>
And here is my Controller :
var app = angular.module('totalBuahApp', []);
app.controller('fruitController', function($scope) {
$scope.fruits = [
{
title : 'Fresh Red Apple',
img : 'https://cdn0.iconfinder.com/data/icons/fruits/512/Apple.png',
description : 'Good for your daily consumption.',
price : 15000,
cartQty : 1,
rating : 0
},
{
title : 'Red Grape',
img : 'http://www.freepngimg.com/thumb/grape/4-grape-png-image-download-picture-thumb.png',
description : 'Like a king.',
price : 34000,
cartQty : 1,
rating : 0
}
];
$scope.total = $scope.fruits.length;
$scope.addRating = function(number, fruit) {
fruit.rating = number;
};
$scope.ratingClass = function(number) {
return (number == $scope.rating) ? "active" : "";
};
});
You can check my fullcode in
https://codepen.io/fanjavaid/pen/MaRWgG
Don't duplicate HTML for every star, use ngRepeat with ngClass:
<div class="rating">
<ul>
<li class="glyphicon glyphicon-star-empty"
ng-click="addRating($index + 1, fruit)"
ng-repeat="star in [0, 1, 2, 3, 4]"
ng-class="{active: fruit.rating >= $index + 1}"></li>
</ul>
</div>
Demo: https://codepen.io/anon/pen/RWOPad?editors=101
Replace your rating Div with the below div
<div class="rating">
<ul>
<li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 1}"></i></li>
<li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 2}"></i></li>
<li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 3}"></i></li>
<li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 4}"></i></li>
<li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 5}"></i></li>
</ul>
and add .active class in your css.
Related
I have an API that load Menu String Looks Like :
<li class="menu-title">
<span>Menus</span>
</li><ul><li class="submenu" [ngClass]="{ 'active' : urlComplete.mainUrl === 'users' }" mCode="SYSTEM" >
<a href="javascript:" [ngClass]="{ 'subdrop' : urlComplete.mainUrl === 'users' }" class="">
<i class='la la-windows'></i>
<span>
System
</span>
<span class="menu-arrow">
</span>
</a>
<ul style="display: none;" [ngStyle]="{ 'display' : urlComplete.mainUrl === 'users' ? 'block' : 'none' }" class=""><li routerLink="/users/user/list" class="" mCode="USERS" >
<a [ngClass]="{ 'active' : urlComplete.subUrl === 'user' }" href="javascript:" class="">
Users
</a>
</li><li routerLink="/users/user/create" class="" mCode="MENU" >
<a [ngClass]="{ 'active' : urlComplete.subUrl === 'menu' }" href="javascript:" class="">
Menus
</a>
</li> </ul>
</li>
</ul><li> <hr> </li>
I want to place this on Agular HTML page. Its shows fine but router link does not work. I understood that its not compile because of dynamic loading.
My front end code below :
ngAfterViewInit(): void {
this._getPermittedMenu();
}
_getPermittedMenu(){
let apiURL = this.baseUrl + "/common/getAuthMenus";
let queryParams: any = {};
this.loginService.sendGetRequest(apiURL,queryParams).subscribe((response: any) => {
// append response
let unFormattedData = response.data;
let data = unFormattedData.replace(/^\s+|\s+$/g, "");
//compile string to html element and sanitize it
this.menuData = this.sanitizer.bypassSecurityTrustHtml(data);
// this.menuData =(this.sanitizer.bypassSecurityTrustHtml(data));
// console.log("REques menu data");
// console.log(this.menuData);
});
}
and I m calling this from
<div id="sidebar-menu" [innerHTML]="menuData" class="sidebar-menu">
The problem is menus show but routerLink can not work link click
I provide some screenshots:
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I'm showing data by ng-repeat. There Have button. to delete item.
After delete item, this button must dissapear only for item that I deleted.
<tr ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate | filter:{state: 'archived'}: archived.state ? true : false">
<td id="outmouse">
<ul style="list-style: none;" class="gt-reset">
<li class="dropdown changecoursename">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="tableOperation norlmalstate">Open Course</span>
<span class="tableOperation openedstate">more options</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a class="tableOperation" ng-click="paymentRemarks()">Remarks</a></li>
<li><a class="tableOperation" ng-click="paymentReturn(paymentinfo)">Return</a></li>
<li ng-switch on="paymentinfo.state">
<div ng-switch-when="archived" class="archived__state">{{paymentinfo.state}}</div>
<a ng-switch-default class="tableOperation" ng-click="paymentDelete();">{{deletebtn}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
There place where I need to delete
<li ng-switch on="paymentinfo.state">
<div ng-switch-when="archived" class="archived__state">{{paymentinfo.state}}</div>
<a ng-switch-default class="tableOperation" ng-click="paymentDelete();">{{deletebtn}}</a>
</li>
My JS
$scope.datas = [{
date: '06-12-2016',
name: 'Pinao Class',
state: 'archived',
remark: 'remarled',
amount: 101,
id: 21
}, {
date: '15-04-2016',
name: 'drivers Class',
state: 'notarchived',
remark: 'remarled',
amount: 102,
id: 22
}];
$scope.paymentList = $scope.datas;
$scope.deletebtn = "delete";
$scope.paymentDelete = function() {
$scope.www = true;
$scope.deletebtn = false;
}
My code deleting for All elements need delete just for one I choose
try this
ng-click="paymentDelete(this.paymentinfo);">// pass current object to delete function
$scope.paymentDelete = function (paymentinfo ) {
$scope.www = true;
var index = $scope.paymentList.indexOf(paymentinfo );
if (index > -1) {
$scope.paymentList.splice(index, 1);
}
}
I have three links (anchor tag) that represent standards like std1, std2. I want to get the active class value.
<li data-interest="1" class="check <? if($std_id == 1){?> class="active"<?}?>" >
<a href="#1" onclick="changeDiv('1','S1')" data-toggle="tab" title="S1">
<span class="round-tabs green">
<span class="grade_catgory">S1</span>
</span>
</a></li>
<li data-interest="2" class="check <? if($std_id == 2){?> class="active"<?}?>" >
<a onclick="changeDiv('2','S2')" data-toggle="tab" title="S2">
<span class="round-tabs yellow">
<span class="grade_catgory">S2</span>
</span>
</a>
</li>
jQuery
$(function() {
// var val = $('ul#myTab1').find('li.active').data('interest');
var itemType = $('ul#myTab1').find('li.check').data('interest');
alert(itemType);
});
I want the value like 1, 2, etc. Where can I put this?
Try this:
$("li").each(function(){ // loop through all li
if($(this).hasClass("active")) { // check if li has active class
console.log($(this).data("interest")) // get the value of data-interest attribute
}
})
Try this :
var val = $('body').find('li.active').attr('data-interest');
I am a little lost with this issue.
When I click on the - a href tag - i want the li active background color to change to a specific color that I have stored in each object - like so obj.color" = #5c6bc0.
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>
How can I do this? I have tried with ng-style - ng-style="{'active':'background-color': obj.color} but that didn't work.
Thanks
You can do something like
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}" ng-style={backgroundColor: obj.id == tagStates.activeItemID ? obj.color : ''}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>
angular
.module('app', [])
.controller('Ctrl', function() {
this.tags = [
{ name: 'bob' },
{ name: 'rick' },
{ name: 'dave' }
];
})
<body ng-controller="Ctrl as vm">
<ul>
<li ng-repeat="obj in vm.tags" ng-class="{'active': vm.active == obj.name}">
<a ng-click="vm.active = obj.name">{{obj.name}}</a>
</li>
</ul>
{{vm.active}}
</body>
https://plnkr.co/edit/wvKIUtJIb0AE1vpWDtv9?p=preview