Question

我试图在加载时从表中获取值，以便根据数据值可以将背景色设置为仪表板上的指示。但是我无法获得这些价值观，任何人都可以帮助我。谢谢。

HTML

$("#city").autocomplete({
        source: function(request, response) {
          $.ajax({
           type: "GET",
           dataType : 'jsonp',
          // cache: false,
          crossDomain:true,
          // async:false,
         contentType: "application/json; charset=utf-8",
            url: "https://iatacodes.org/api/v6/autocomplete",
    //headers: {  'Access-Control-Allow-Origin': '*' },
            /*headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type':'application/json'
            },*/


            data: {
              api_key:"66e4db3f-e4fc-4554-b4c4-6f4d8b32ba2f",
              query: request.term
            },
            success: function(data) {alert(data);
              response(data);
            }
          });
        },
        minLength: 3,
        select: function(event, ui) {
          log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        },
        open: function() {
          $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
          $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
      });

我尝试过jQuery

<div class="row">
      <div id="content1" class="toggle" style="display:none">
        <div class="col-sm-8">
          <div class="well">
            <table id="table1" class="table table-hover" ng-show="mytable1">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Operational Analysis</th>
                            <th></th>
                            <th></th>
                            <th ng-repeat="item in yearList">{{item.years}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="operation in dataOperationList">
                            <td class="details-control"></td>
                            <td>{{operation.reportTypeDetail}}</td>
                            <td>{{operation.reportFormula}}</td>
                            <td>{{operation.reportRang}}</td>
                            <td>{{operation.year5}}</td>
                            <td>{{operation.year4}}</td>
                            <td>{{operation.year3}}</td>
                            <td>{{operation.year2}}</td>

                        </tr>
                    </tbody>
            </table>
          </div>
        </div>

但是没有用。

Answer 1

您可以简单地使用Schedule指令，它允许您动态地将CSS类添加到元素。 https://docs.angularjs.org/api/ng/directive/ngClass

例如，如果要为ngClass元素添加绿色背景（如果内容为2019），则首先应定义CSS类：

td

然后，在.green{ backgroud: green; }元素上使用ngClass指令：

td

更新：

如果要从变量中获取颜色，也可以使用<td ng-class="{green: (operation.year2 == '2019')}">{{operation.year2}}</td>指令：

ngStyle

<td ng-style="{background: (operation.year2 == '2019')? colorValue : defaultColor}">{{operation.year2}}</td>和colorValue被定义在某个地方。

Answer 2

这是更正，您可以在这里进行测试：https://jsfiddle.net/abec/6f47jepq/4/

HTML部分：

<body ng-app="operationApp" onload="showTableValue()">
  <div class="row" ng-controller="operationController">
    <div id="content1" class="toggle" style="display:none">
      <div class="col-sm-8">
        <div class="well">
          <table id="table1" class="table table-hover" ng-show="mytable1">
            <thead>
              <tr>
                <th></th>
                <th>Operational Analysis</th>
                <th></th>
                <th></th>
                <th ng-repeat="item in yearList">{{item.years}}</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="operation in dataOperationList">
                <td class="details-control"></td>
                <td>{{operation.reportTypeDetail}}</td>
                <td>{{operation.reportFormula}}</td>
                <td>{{operation.reportRang}}</td>
                <td>{{operation.year5}}</td>
                <td>{{operation.year4}}</td>
                <td>{{operation.year3}}</td>
                <td>{{operation.year2}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showTableValue() {
      var tbl = document.getElementById('table1');
      if (tbl != null) {
        for (var j = 1; j < tbl.rows[1].cells.length; j++)
          alert(tbl.rows[1].cells[j].innerHTML);
      }
    }

  </script>
</body>

JS部分：

var module = angular.module("operationApp", []);

module.controller("operationController", function($scope) {
  $scope.mytable1 = true;
  $scope.yearList = [{
    "years": "2000,2001,2002,2003,2004"
  }]
  $scope.dataOperationList = [{
      "reportTypeDetail": "Report type details 1",
      "reportFormula": "Report Formula 1",
      "reportRang": "Report Rang 1",
      "year2": 1002,
      "year3": 1003,
      "year4": 1004,
      "year5": 1005
    },
    {
      "reportTypeDetail": "Report type details 2",
      "reportFormula": "Report Formula 2",
      "reportRang": "Report Rang 2",
      "year2": 2002,
      "year3": 2003,
      "year4": 2004,
      "year5": 2005
    }
  ];
});

如何从angularjs范围获取动态到达表的值？

2 个答案: