Angularjs 如何使用angular js为每个td分配colspan
我想根据百分比分配每个Angularjs 如何使用angular js为每个td分配colspan,angularjs,Angularjs,我想根据百分比分配每个colspan值。以下代码未按预期工作 <style> .stacked-chart table {margin:0; padding:0; width:100%;} .stacked-chart table tr td,.stacked-chart table tr th {border-right:0px solid #ccc; padding:17px 0;} .stacked-chart table tr th {padding:0; border:1p
<style>
.stacked-chart table {margin:0; padding:0; width:100%;}
.stacked-chart table tr td,.stacked-chart table tr th {border-right:0px solid #ccc; padding:17px 0;}
.stacked-chart table tr th {padding:0; border:1px #fff;}
.stacked-chart table tr td.one {background:#5a5a5a;}
.stacked-chart table tr td.two {background:#959595;}
.stacked-chart table tr td.three{background:#71c5e8;}
.stacked-chart table tr td.four {background:#009fdb;}
.stacked-chart table tr td.five {background:#0568ae;}
.stacked-chart table tr td.fillerspace {}
</style>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="reportCtrl">
<div class="stacked-chart col-md-8">
<table ng-repeat="sec in sections" id="chart-section{{$index}}" >
<thead>
<th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th>
</thead>
<tbody>
<tr ng-repeat="quest in sec.questions" ng-if="quest.questtype=='RD'" id="question{{$index}}" >
<td class="left-rail" colspan="20">{{quest.question}}</td>
<td class="one"></td>
<td class="three"></td>
<td class="five"></td>
<td class="fillerspace"></td>
</tr>
<tr><td class="fillerspace" colspan="121"></td></tr>
</tbody>
</table>
</div>
</div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('reportCtrl', function($scope, $http, $location, $timeout) {
$http.get('/apps/bcagencyportal/flatfilejson/testjson.js').success(function(result) {
$scope.evaldetails = result.evaldetails;
$scope.sections = result.sections;
$scope.questions = result.questions;
$scope.responses = result.responses;
for (var sectioncount = 0; sectioncount < $scope.sections.length; sectioncount++) {
for (var questioncount = 0; questioncount < $scope.sections[sectioncount].questions.length; questioncount++) {
if ($scope.sections[sectioncount].questions[questioncount].questtype == "RD") {
var countofone = 0,
countoftwo = 0,
countofthree = 0,
countoffour = 0,
countoffive = 0,
countofna = 0;
for (var responsecount = 0; responsecount < $scope.sections[sectioncount].questions[questioncount].responses.length; responsecount++) {
//console.log("value of Section:"+sectioncount+" Question:"+questioncount+" Response:"+responsecount+" is --- "+$scope.sections[sectioncount].questions[questioncount].responses[responsecount].rating);
switch ($scope.sections[sectioncount].questions[questioncount].responses[responsecount].rating) {
case "1":
countofone++;
break;
case "2":
countoftwo++;
break;
case "3":
countofthree++;
break;
case "4":
countoffour++;
break;
case "5":
countoffive++;
break;
case "NA":
default:
countofna++;
break;
}
}
//console.log("Occurance of each is - countofone:"+countofone+" countoftwo:"+countoftwo+" countofthree:"+countofthree+" countoffour:"+countoffour+" countoffive:"+countoffive+" countofna:"+countofna);
var noofparticipants = $scope.evaldetails.participants.length;
console.log(noofparticipants);
var percentofone, percentoftwo, percentofthree, percentoffour, percentoffive, percentofna;
percentofone = (countofone / noofparticipants) * 100;
console.log("percentofone" + percentofone);
percentoftwo = (countoftwo / noofparticipants) * 100;
console.log("percentoftwo" + percentoftwo);
percentofthree = (countofthree / noofparticipants) * 100;
console.log("percentofthree" + percentofthree);
percentoffour = (countoffour / noofparticipants) * 100;
console.log("percentoffour" + percentoffour);
percentoffive = (countoffive / noofparticipants) * 100;
console.log("percentoffive" + percentoffive);
percentofna = (countofna / noofparticipants) * 100;
console.log("percentofna" + percentofna);
/*assigning colspan to each td */
angular.element('table#chart-section'+sectioncount+' tr#question'+questioncount+'td.one').prop('colspan', percentofone+percentoftwo);
angular.element('table#chart-section'+sectioncount+' tr#question'+questioncount+' td.three').prop('colspan', percentofthree);
angular.element('table#chart-section'+sectioncount+' tr#question'+questioncount+' td.five').prop('colspan',percentoffour+ percentoffive);
angular.element('table#chart-section'+sectioncount+' tr#question'+questioncount+' td.fillerspace').prop('colspan', percentofna);
console.log("******"+'table#chart-section'+sectioncount+' tr#question'+questioncount+' td.one');
console.log("*****"+'table#chart-section'+sectioncount+' tr#question'+questioncount+' td.three');
angular.element('table#chart-section0 tr#question0 td.one')
}
}
}
});
});
</script>
.堆叠图表表{边距：0；填充：0；宽度：100%；}
.stacked chart table tr td、.stacked chart table tr th{border right:0px solid#ccc；padding:17px 0；}
.stacked chart表tr th{padding:0；border:1px#fff；}
.堆叠图表表tr td.one{背景：#5a5a；}
.堆叠图表表tr td.two{背景：#959595；}
.堆叠图表表tr td.three{背景：#71c5e8；}
.堆叠图表表tr td.four{背景：#009fdb；}
.堆叠图表表tr td.five{背景：#0568ae；}
.stacked chart table tr td.fillerspace{}
{{quest.question}
var myapp=angular.module（'myapp'，[]）；
控制器（'reportCtrl'，函数（$scope、$http、$location、$timeout）{
$http.get（'/apps/bcagencyportal/flatfilejson/testjson.js'）.success（函数（结果）{
$scope.evaldetails=result.evaldetails；
$scope.sections=result.sections；
$scope.questions=result.questions；
$scope.responses=result.responses；
对于（var sectioncount=0；sectioncount<$scope.sections.length；sectioncount++）{
对于（var questioncount=0；questioncount<$scope.sections[sectioncount].questions.length；questioncount++）{
if（$scope.sections[sectioncount].questions[questioncount].questtype==“RD”）{
var countofone=0，
countoftwo=0，
三的计数=0，
倒数四=0，
countoffive=0，
countofna=0；
对于（var responsecount=0；responsecount<$scope.sections[sectioncount]。疑问[questioncount]。responses.length；responsecount++）{
//console.log（“节的值：“+sectioncount+”问题：“+questioncount+”响应：“+responsecount+”是----”+$scope.sections[sectioncount]。问题[questioncount]。响应[responsecount]。评级）；
开关（$scope.sections[sectioncount]。问题[questioncount]。响应[responsecount]。评分）{
案例“1”：
countofone++；
打破
案例“2”：
countoftwo++；
打破
案例“3”：
数三++；
打破
案例“4”：
倒数四个++；
打破
案例“5”：
countoffive++；
打破
案例“不适用”：
违约：
countofna++；
打破
}
}
//console.log（“每个is的发生-countofone:+countofone+”countoftwo:“+countoftwo+”countofthree:“+countofthree+”countoffour:“+countoffour+”countoffive:“+countofna:”countofna”）；
var noofparticipants=$scope.evaldetails.participants.length；
控制台日志（无参与者）；
var百分之一、百分之二、百分之三、百分之四、百分之五、百分之A；
一人百分比=（一人/无参与人数）*100；
控制台日志（“一个百分比”+一个百分比）；
百分之二=（两名/无参与者的人数）*100；
console.log（“百分之二”+百分之二）；
三人百分比=（三人/无参与者的计数）*100；
log（“三个百分比”+三个百分比）；
百分之四=（四名/无参与者）*100；
console.log（“百分之四”+百分之四）；
百分之五=（五个/无参与人数）*100；
控制台日志（“百分之五”+百分之五）；
A百分比=（A/NOOFP参与人数）*100；
log（“percentofna”+percentofna）；
/*为每个td分配colspan*/
角度.element（'table#chart section'+sectioncount+'tr#question'+questioncount+'td.one'）.prop（'colspan'，percentofone+percentoftwo'）；
角度元素（'table#chart section'+sectioncount+'tr#question'+questioncount+'td.three'）.prop（'colspan'，三者的百分比）；
角度.element（'table#chart section'+sectioncount+'tr#question'+questioncount+'td.five'）.prop（'colspan'，percentofffour+percentoffive）；
角度.element（'table#chart section'+sectioncount+'tr#question'+questioncount+'td.fillerspace'）.prop（'colspan'，percentofna）；
console.log（“*******”+‘表#图表部分’+sectioncount+‘tr#问题’+questioncount+‘td.one’）；
log（“****”+“表#图表部分”+部分计数+“tr#问题”+问题计数+“td.three”）；
角度元素（'表#图表-第0节tr#问题0 td.one'）
}
}
}
});
});
colspan