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?

You may wish to read [this article](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1). Honestly, using AngularJS, you really need to forget what you learned when using jQuery. — Heretic Monkey, May 10 '17 at 14:48

score 0 · Answer 1 · answered May 10 '17 at 14:45

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

score 0 · Accepted Answer · answered May 10 '17 at 15:10

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>

It makes even more sense when class name is calculated by controller method and not by means of 'html programming'. — Estus Flask, May 10 '17 at 15:15
Thanks everyone. I think I'm going to try to avoid the monster ng-class in the html if I can. I originally tried this method but couldn't get it to render properly, but maybe I was erroring out on something else. — KateJean, May 10 '17 at 15:25
for those interested, you can take @Lex 's method above and pull it into your controller. so something like: `$scope.getClass = function(cell_value) { if ((cell_value >= 0) && (cell_value <= 10)) { return 'value-range-0-10'; } else if ((cell_value > 10) && (cell_value <= 20)) { return 'value-range-11-20';` etc. then in html: `ng-class="getClass(item.value)"` — KateJean, May 10 '17 at 15:59

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

2 Answers2