gpt4 book ai didi

javascript - Angularjs-需要在单击 元素时编译模板

转载 作者:行者123 更新时间:2023-12-03 08:08:25 24 4
gpt4 key购买 nike

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

关于javascript - Angularjs-需要在单击 <td> 元素时编译模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34260127/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com