AngularJS and JQuery — Combining $(document).ready(function()) with Angular Controller

Question

Help me understand this. I have an angular controller that essentially follows this construct:

angular.module('myApp', [])
    .controller('ListCtrl', function($scope, $timeout, $http){

    // Make calls to the API for Health List
    function initialFetch(){
        $http.get('healthInfo.json')
            .then(function(response){ $scope.healthinfo= response.data; });

    //More code here for color implementation 
}; 

Essentially, I call a data source that lists items and an associated "value" between 0 and 100. In my front-end, I want to render this list and change the background color based on the associated value.

I have accomplished this in my JSFiddle , but I don't know how to combine this with my angular controller. Any thoughts?

Answer 1

$(document).ready(...) makes sure that your code gets executed when the page is ready (done loading).

Your controller function will also get executed when the page is ready. Does it work when you assume that .controller('ListCtrl', function($scope, $timeout, $http){ is the same as $(document).ready(...) ? There shouldn't really be any difference, except of course how you pass data from your controller to your HTML (using $scope , for instance).

Answer 2

First, you don't need $(document).ready() . In fact, I would get rid of jQuery since both jQuery and Angular are DOM manipulation frameworks and will end up causing issues that are difficult to debug.

As for assigning the class based on value, you could use ng-repeat and a monster ng-class to apply the appropriate class based on the value. Here's a working example sans your web service call.

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.healthInfo = [{ value: 23 }, { value: 10 }, { value: 39 }, { value: 88 }, { value: 57 }, { value: 94 }, { value: 69 } ]; }); 

 .list-item { flex-grow: 1; width: 300px; padding: 20px; border: 1px solid white; } .value-range-0-10 { background-color: rgba(255, 0, 0, 0.5) } .value-range-11-20 { background-color: rgba(255, 77, 0, 0.5) } .value-range-21-30 { background-color: rgba(255, 128, 0, 0.5) } .value-range-31-40 { background-color: rgba(255, 179, 0, 0.5) } .value-range-41-50 { background-color: rgba(255, 230, 0, 0.5) } .value-range-51-60 { background-color: rgba(229, 255, 0, 0.5) } .value-range-61-70 { background-color: rgba(179, 255, 0, 0.5) } .value-range-71-80 { background-color: rgba(128, 255, 0, 0.5) } .value-range-81-90 { background-color: rgba(77, 255, 0, 0.5) } .value-range-91-100 { background-color: rgba(0, 255, 0, 0.5) } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div class="list-view" style="display:flex; flex-wrap:wrap"> <div class="list-item" ng-repeat="item in healthInfo" ng-class="{'value-range-0-10':item.value <= 10, 'value-range-11-20':item.value > 10 && item.value <= 20, 'value-range-21-30':item.value > 20 && item.value <= 30, 'value-range-31-40':item.value > 30 && item.value <= 40, 'value-range-41-50':item.value > 40 && item.value <= 50, 'value-range-51-60':item.value > 50 && item.value <= 60, 'value-range-61-70':item.value > 60 && item.value <= 70, 'value-range-71-80':item.value > 70 && item.value <= 80, 'value-range-81-90':item.value > 80 && item.value <= 90, 'value-range-91-100':item.value > 90}">{{item.value}}</div> </div> </div>