Question

帮我理解这一点。我有一个角度控制器，基本上遵循这个结构：

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

基本上，我调用一个数据源来列出项目和相关的＆＃34;值＆＃34;在我的前端，我想渲染此列表并根据相关值更改背景颜色。

我已经在JSFiddle中完成了这项工作，但我不知道如何将其与角度控制器结合使用。有什么想法吗？

Answer 1

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

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

Answer 2

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

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

＆＃13;

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

＆＃13;

.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)
}

＆＃13;

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

＆＃13;

AngularJS和JQuery - 将$（document）.ready（function（））与Angular Controller结合使用

2 个答案: