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

Question

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>

You should try to add the classes using angular, that way you can modify variables in the scope, also classnames. Using jQuery and Angular like this could give you weird results I guess — Martijn de Langh
– Martijn de Langh, Commented Oct 13, 2015 at 14:08
Take jQuery.js out of your page while learning angular. Only put it in when you find a real need for it — charlietfl
– charlietfl, Commented Oct 13, 2015 at 14:13

Diana R · Accepted Answer · 2015-10-13 14:12:02Z

6

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>

answered Oct 13, 2015 at 14:12

Diana R

1,1741 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diana R Over a year ago

@MaximDreddoff You arw welcome. Make sure to mark the correct answer.

Sidius · Accepted Answer · 2015-10-13 14:10:14Z

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 :)

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related