在加载json之后，在AngularJS应用中向HTML文档添加一个类？

我想在我的html文档中添加一些css-classes。当我用我的应用程序没有json（简单$scope.resumes = [{..some data..}]）它的作品不错，但是当我包括JSON文件它的工作原理不好（我看到必要的数据，但没有CSS类）在加载json之后，在AngularJS应用中向HTML文档添加一个类？

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>

来源

2015-10-13 Maximus Dredoff

您应该尝试使用angular来添加类，这样您可以修改范围中的变量，也可以修改classnames。使用jQuery和Angular这样可能会给你奇怪的结果我猜 –

在学习角度的同时，把jQuery.js带出你的页面。只有在你找到真正需要的时候才放入它 – charlietfl

如果您准备好文档后使用append类，可能为时过早。

插入两个：

$(".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");

在这里

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

当文档准备好并不意味着JSON后也准备好了:)

来源

2015-10-13 14:10:14 Sidius

不，它仍然不起作用 –

使用ng-class-even和ng-class-odd像这个：

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

来源

2015-10-13 14:12:02

谢谢:)它帮助了我。 –

@MaximDreddoff您欢迎您。确保标记正确的答案。 –

在加载json之后，在AngularJS应用中向HTML文档添加一个类？

回答

相关问题