Angularjs Remove Table Row with Apply ngClassEven NgClassOdd

Angularjs Remove Table Row with Apply ngClassEven NgClassOdd

Today, We want to share with you Angularjs Remove Table Row with Apply ngClassEven NgClassOdd.
In this post we will show you Angularjs Remove Table Row with Apply ngClassEven NgClassOdd, hear for Angularjs Remove Table Row with Apply ngClassEven NgClassOdd we will give you demo and example for implement.
In this post, we will learn about Angularjs Remove Table Row with Apply ngClassEven NgClassOdd with an example.

Learn how to simple use AngularJS HTML Element Directives to Work with Core CSS class and appaly to CSS Even and Odd Class

AngularJS provides ngClass directives,ngClassEven directives and ngClassOdd directives for controlling all the applied class to an HTML element.

Example

AngularJS ngClassEven NgClassOdd Example

index.html

simple create a Dynemically Angular Table :

[php]

[/php]

App.js

The javascript code(app.js file) are as follows

[php]
var app = angular.module(“liveApp”, []);
app.controller(“liveCtrl”, function($scope, $http) {

$scope.arr_obj =[{“study_id”:”1″,”sub_id”:”1″,”subs_id”:[],”sub_name”:”Engelsk”,”sub_code”:”ENG1002″,”Status”:[1,1]},{“study_id”:”1″,”sub_id”:”2″,”subs_id”:[“Spansk I”,”Spansk II”,”Spansk I+II”,”Tysk I”,”Tysk II”,”Tysk I+Iim Fransk I”,”Fransk II”,”Fransk I+II”,”Annet fremmedspråk I”,”Annet fremmedspråk II”,”Annet fremmedspråk I+II”],”sub_name”:”Fremmedspråk “,”sub_code”:”FSP”,”Status”:[2,2]},{“study_id”:”1″,”sub_id”:”3″,”subs_id”:[],”sub_name”:”Geografi”,”sub_code”:”GEO1001″,”Status”:[1,3]},{“study_id”:”1″,”sub_id”:”4″,”subs_id”:[],”sub_name”:”Historie”,”sub_code”:”HIS1002″},{“study_id”:”1″,”sub_id”:”5″,”subs_id”:[],”sub_name”:”Kroppsøving Vg3″,”sub_code”:”KRO1006″},{“study_id”:”1″,”sub_id”:”6″,”subs_id”:[“1P”,”1T”],”sub_name”:”Matematikk vg1″,”sub_code”:”MAT”},{“study_id”:”1″,”sub_id”:”7″,”subs_id”:[“2P”,”S1″,”R1″],”sub_name”:”Matematikk vg2″,”sub_code”:”MAT/REA”},{“study_id”:”1″,”sub_id”:”8″,”subs_id”:[],”sub_name”:”Naturfag”,”sub_code”:”NAT1002″},{“study_id”:”1″,”sub_id”:”9″,”subs_id”:[],”sub_name”:”Norsk hovedmål”,”sub_code”:”NOR1211″},{“study_id”:”1″,”sub_id”:”11″,”subs_id”:[],”sub_name”:”Norsk muntlig”,”sub_code”:”NOR1213″},{“study_id”:”1″,”sub_id”:”10″,”subs_id”:[],”sub_name”:”Norsk sidemål”,”sub_code”:”NOR1212″},{“study_id”:”1″,”sub_id”:”12″,”subs_id”:[],”sub_name”:”Religion og etikk”,”sub_code”:”REL1001″},{“study_id”:”1″,”sub_id”:”13″,”subs_id”:[],”sub_name”:”Samfunnsfag”,”sub_code”:”SAF1001″}];

$scope.customdataId = 0;

$scope.setindex = function(id) {
$scope.customdataId = id;

}

$scope.RemoveRow = function() {
if ($scope.arr_obj.length >= 1)
{
$scope.arr_obj.splice($scope.customdataId, 1);
if ($scope.arr_obj.length>=1 )
{
if ( $scope.customdataId >= 1)
{
$scope.customdataId = $scope.customdataId-1;
}
else
{
$scope.customdataId = 0;
}
console.log($scope.customdataId);
}
}
}

$scope.OddClassData = function(id)
{
if(id === $scope.customdataId)
return “selected”;
else
return “odd”;
};

$scope.EvanClassData = function(id)
{
if(id === $scope.customdataId)
return “selected”;
else
return “even”;

};
});
[/php]

Style.css

First of all create css, for applying different type of color to each type, below is the create file css.

[php]
table, th, td {
border: 2px solid red;
}
.selected {
background-color: red;
}

.odd {
background-color: green;
}

.even {
background-color: purple;
}
[/php]

The ngClassOdd directive and ngClassEven directive work exactly as ngClass but uniq, except they simple work in all the conjunction with ngRepeat (looping) and take some effect only on class appaly to odd (even) dynemically rows.

Example

We hope you get an idea about Angularjs Remove Table Row with Apply ngClassEven NgClassOdd
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.