AngularJS 和 JQuery -- 结合 $(document).ready(function()) 和 Angular 控制器

Question

帮助我理解这一点。我有一个基本上遵循这个结构的 angular 控制器：

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

本质上，我调用了一个列出项目的数据源和一个介于 0 和 100 之间的关联 "value"。在我的前端，我想呈现此列表并根据关联值更改背景颜色.

我已经在我的 JSFiddle 中完成了这个，但我不知道如何将它与我的 angular 控制器结合起来。有什么想法吗？

Answer 1

$(document).ready(...) 确保您的代码在页面准备就绪（完成加载）时执行。

您的控制器功能也将在页面准备就绪时执行。当您假设 .controller('ListCtrl', function($scope, $timeout, $http){ 与 $(document).ready(...) 相同时，它是否有效？应该没有什么区别，当然除了你如何将数据从你的控制器传递到你的HTML（例如使用$scope）。

Answer 2

首先，您不需要 $(document).ready()。事实上，我会摆脱 jQuery，因为 jQuery 和 Angular 都是 DOM 操作框架，最终会导致难以调试的问题。

至于根据值分配class，您可以使用ng-repeat和怪物ng-class根据值应用适当的class。这是一个没有您的 Web 服务调用的工作示例。

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>

AngularJS 和 JQuery -- 结合 $(document).ready(function()) 和 Angular 控制器

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

javascript

jquery

document-ready

angularjs