有条件地添加css在角度问题？
[英]Adding css conditionally issue in angular?
问题描述
I am adding css class depending on property id , When i ng-click css class is adding and when i clicked second property id,The class which is added first property id is removing . 
我根据属性ID添加css类，当我单击css类并单击第二个属性id时，添加的第一个属性id的类正在删除。 How i can keep css class as it is for first property id also but when i click second times it should be remove from property. 我如何也可以保持css类的第一属性ID，但当我单击第二次它应从属性中删除。
Here is Code. 这是代码。
<div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist"
ng-click="WishlistAdd($index,project.propertyId)"
ng-class="getClass($index)"
ng-repeat="prop in homepalGroupProp.properties">
<a href="">
<span class="prprt-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
<span>Wishlist</span>
</a>
</div>
My controller code is 我的控制器代码是
var selectedProductId = null;
a.selectedIndex = -1;
a.WishlistAdd = function ($index, propertyId) {
if ($index === a.selectedIndex) {
a.selectedIndex = -1;
} else {
a.selectedIndex = $index;
}
selectedProductId = (selectedProductId === propertyId ? null : propertyId);
var data = {
wishlistFlag: (selectedProductId !== null),
propertyId: propertyId
};
e.createWishLists(data).then(function (result) {
console.log(JSON.stringify(result));
a.wishlistFlag = result.config.data.wishlistFlag;
alert(a.wishlistFlag);
}, function (error) {
alert("error");
});
}
Adding class function here. 在这里添加类函数。
a.getClass = function(ind){
if( ind === a.selectedIndex ){
return "selected";
} else{
return "";
}
}
3 个解决方案
解决方案1
0 2017-01-23 06:30:57
Try changing just the ng-click and ng-class attributes like follows: 尝试仅更改ng-click和ng-class属性，如下所示：
ng-click = "selectedIndex = $index"
ng-class = "selectedIndex == $index ? 'yourClassName':''"
You don't need any Controller Code to acheive it. 您不需要任何控制器代码即可实现它。
CSS CSS
.yourClassName {
background-color: black;
}
解决方案2
0 2017-01-23 06:39:14
This is a sample code to implement ng-class as you required. 这是根据需要实现ng-class的示例代码。 I hope this will be helpful for you. 希望对您有帮助。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <style> .SelectionContainer { width: 100px; height: 100px; background-color: #efefef; } .ErrorSelect { background-color: red; } </style> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-options="Option.Code for Option in OptionList track by Option.Id" ng-model="SelectedOptionValue"></select> <div class="SelectionContainer" ng-class="IsErrorSelected()"></div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.SelectedOptionValue = {Id: "", Code: ""}; $scope.OptionList = [{Id: 1, Code: "Option1"}, {Id: 2, Code: "Option2"}, {Id: 3, Code: "Never Select"}, {Id: 4, Code: "Option4"}]; $scope.IsErrorSelected = function(){ var returnVal = ($scope.SelectedOptionValue.Id == 3)? "ErrorSelect": ""; return returnVal; } }); </script> </body> </html>
解决方案3
0 2017-01-23 06:46:24
You can simple check the selected index in ng-class please refer below code 您可以在ng-class中简单检查选中的索引，请参考以下代码
<div class="hmpal-prprt-post-wdgt hmpal-prprt-wishlist"
ng-click="clickedIndex = $index ;WishlistAdd($index,project.propertyId)"
ng-class="clickedIndex == $index ? customCss : ''"
ng-repeat="prop in homepalGroupProp.properties">
<a href="">
<span class="prprt-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>
<span>Wishlist</span>
</a>
</div>
Custom CSS 自定义CSS
.customCss {
// css code
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.