Angularjs-点击<td>要素

Angularjs- need to compile a template on click of <td> element

本文关键字：要素 gt td lt 点击 Angularjs-      更新时间：2023-09-26

I在angularjs中创建了一个复杂的表；单击<td>时，我需要进行ajax调用，并在我单击的行下的新行中填充所有值
到目前为止，我已经实现了

var app1 = angular.module('reportModule', []);
app1.directive('tableValue', function($q, $http, $templateCache) {
  return {
    restrict: 'A',
    template: '<tr><td id="greenBackground">{{result.project}}</td><td>{{result.val1}}</td><td>{{result.val2}}</td><td>{{result.val3}}</td><td>{{result.val4}}</td><td>{{result.val5}}</td><td id="greenBackground"></td><td id="greenBackground"></td><td id="greenBackground"></td><td id="greenBackground"></td></tr>',
    link: function(scope, elm, attrs) {
      scope.clickme = function() {
        var dataToSend = elm.text();
        console.log(attrs);
        $http({
          method: 'GET',
          params: {
            'portfolio': dataToSend
          },
          url: 'getProjectforCOQ.do',
          cache: true
        }).then(function(result) {
          $compile(template)(scope);
        });
      };
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<tr>
  <td table-value id="blueBackgroundDigital" class="expandProjects">DIGITAL</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td id="blueBackground"></td>
  <td id="blueBackground"></td>
  <td id="blueBackground"></td>
  <td id="blueBackground"></td>
</tr>

点击后，我完全沉浸在编译模板中。需要帮助。

我希望这能帮助你：）

<!DOCTYPE html>
<html ng-app="reportModule">
<head>
  <title>stackoverflow</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
  <table-value></table-value>
  <script>
    var app = angular.module('reportModule', []);
    app.directive('tableValue', function($q, $http) {
      return {
        restrict: 'E',
        template: '<button ng-click="clickToCallAjax()">load data</button><table><tr ng-repeat="info in infos"><td ng-bind="info.val"></td><td ng-bind="info.val2"></td><td ng-bind="info.val3"></td></tr></table>',
        link: function(scope, elm, attrs) {
          //this is my current data
          scope.infos = [{
            val: "val1",
            val2: "val2",
            val3: "val3"
          }, {
            val: "val4",
            val2: "val5",
            val3: "val6"
          }];
          scope.clickToCallAjax = function() {
            //call your ajax and fill the infos
            //response is your ajax answer
            var response = [{
              val: "val7",
              val2: "val8",
              val3: "val9"
            }, {
              val: "val10",
              val2: "val1",
              val3: "val2"
            }];
            //scope.infos = response [if you want to remove old data and replace them]
            //[if you want to push new data in your table]
            angular.forEach(response, function(item) {
              scope.infos.push(item);
            });
          };
        }
      };
    });
  </script>
</body>
</html>

相关文章：