CODEWITHSUNDEEP
javascripthtmlcssjsonangularjs
Maximus Dredoff
Maximus Dredoff

Reputation: 306

Add a class to HTML document in AngularJS app, after loading json?

I want to add some css-classes into my html document. When I use my app without json(simple $scope.resumes = [{..some data..}]) it works nice, but when I include json file it works bad(i see necessary data, but without css-classes)

var myApp = angular.module('myApp', []);

myApp.controller('ResumeListCtrl', function ($scope, $http) {
    $scope.title="resume";
    $http.get(window.location+'/js/resumes.json').success(function(data){
        $scope.resumes= data;
    });
  });

$(document).on("ready", function() {
    $(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
    $(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
            <div class="expa col-xs-6 col-sm-6 col-md-6 col-lg-6"  ng-repeat="resume in resumes">
                <div class="box" >
                    <h3 class="h3-style">{{resume.name}}</h3>
                    <div class="description_company_name"><span>{{resume.company}}</span><span><i
                            class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
                    <div class="hidden-xs">
                       {{resume.description}}
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 213

Answers (2)

Diana R
Diana R

Reputation: 1174

Use ng-class-even and ng-class-odd like this:

<div class="box" ng-class-odd="'hvr-bubble-left margin_left_5 box-float-left'" ng-class-even="'hvr-bubble-right margin_right_5 box-float-right'">
   <h3 class="h3-style">{{resume.name}}</h3>
   <div class="description_company_name"><span>{{resume.company}}</span><span><i class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
    <div class="hidden-xs">{{resume.description}}</div>
</div>

Upvotes: 6

Sidius
Sidius

Reputation: 414

If you use the append class on document ready, it might be too early.

Insert these two:

$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");

In here

$http.get(window.location+'/js/resumes.json').success(function(data){
    $scope.resumes= data;
});

When the document is ready does not mean that the JSON post is also ready :)

Upvotes: 0

Related Questions