Question

我正在使用Angular JS动态创建表。在我的表中，我必须传递JSON行。但当它呈现它显示错误时！

错误：[$ parse：syntax]语法错误：令牌'对象'是意外的，期望表达式[[object Object] |的第9列的[]] QcDetailsManualAuto]从[Object] |开始QcDetailsManualAuto]。

代码：

var jData = JSON.parse(response.data);
             var vQCTableData = jData.ResultData;
            var vQCTable = '';
            vQCTable += "<table class=\"table table-striped table-bordered table-hover\" id=\"qctable\">";
            vQCTable += "<thead>";
            vQCTable += "<tr>";
            vQCTable += "<th>SOM</th>";
            vQCTable += "<th>EOM</th>";
            vQCTable += "<th>Type of Error</th>";
            vQCTable += "<th>QC Type</th>";
            vQCTable += "<th>Remarks</th>";
            vQCTable += "<th>Action</th>";
            vQCTable += "</tr>";
            vQCTable += "</thead>";
            for(var td in vQCTableData)
            {                                                                                          
                vQCTable += "<tbody>";
                vQCTable += "<tr class=\"wer1\" ng-if=\"" + vQCTableData[td] + " | QcDetailsManualAuto\">";
                vQCTable += "<td>" +vQCTableData[td].SOM+ "</td>";
                vQCTable += "<td>" +vQCTableData[td].EOM+ "</td>";
                vQCTable += "<td>" +vQCTableData[td].Parameter+ "</td>";
                vQCTable += "<td>" +vQCTableData[td].QCType+ "</td>";
                vQCTable += "<td>" +vQCTableData[td].Remarks+ "</td>";
                vQCTable += "<td class=\"MediaDataListPointer\">";
                vQCTable += "<span ng-click=\"QCParameterEdit(" + vQCTableData[td] + ")\" title=\"Edit\" class=\"glyphicon glyphicon-pencil QualityCheckIcons\"></span>";
                vQCTable += "<span ng-click=\"DeleteMQC(" + vQCTableData[td] + ")\" title=\"Delete\" class=\"glyphicon glyphicon-trash QualityCheckIcons\"></span>";
                vQCTable += "</td>";
                vQCTable += "</tr>";
                vQCTable += " </tbody>";
            }
            vQCTable += "</table>";

            var mediadiv = angular.element(document.querySelector('#mediadiv'));
            mediadiv.html($compile(vQCTable)($scope));

在 [回复] 我在调用网址后获取数据。

QCParameterEdit 函数需要json行才能实现其功能

    $scope.QCParameterEdit = function (data) {
    $("#GenerateMarksModal").modal();
    $scope.QCPDRButton = "Update";
    $scope.somModel = data.SOM;
    $scope.eomModel = data.EOM;
    $scope.qCParameterModel = data.QcParamUID;
    $scope.typeOfErrorModel = data.Type;
    $scope.typeModel = data.Type;
    $scope.remarksModel = data.Remarks;
    $scope.UID = data.UID;
    $scope.QcParameterIUDSuccess = false;
    $scope.QcParameterIUDFailure = false;
    $scope.QcParameterIUDSMessage = '';
    $scope.QcParameterIUDFMessage = '';
};

QcDetailsManualAuto 是角度自定义过滤器[无法更改它，因为它在多个地方使用]

app.filter('QcDetailsManualAuto', function () {
return function (value) {
    var result = false;
    if (value.QCType == 'Auto' || value.QCType == 'Manual') { result = true; }
    return result;
};
});

提前致谢！

Answer 1

你必须在控制器中使用过滤器而不是像

这样的html

＆＃13;

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $compile,$filter) {
var data=[
    {
        "UID": "d465703c-504c-4a4f-b8e2-2877b0eadc1",
        "QCType": "Manual"
    }
]

var vQCTable = '';
            vQCTable += "<table class=\"table table-striped table-bordered table-hover\" id=\"qctable\">";
            vQCTable += "<thead>";
            vQCTable += "<tr>";
            vQCTable += "<th>SOM</th>";
            vQCTable += "<th>EOM</th>";
            vQCTable += "</tr>";
            vQCTable += "</thead>";
            for(var td in data)
            {           
                vQCTable += "<tbody>";
                //notice the line below
                vQCTable += "<tr class=\"wer1\" ng-if=\"" + $filter('QcDetailsManualAuto')(data[td]) + ">";
                vQCTable += "<td>" +data[td].QCType+ "</td>";
                vQCTable += "</tr>";
                vQCTable += " </tbody>";
            }
            vQCTable += "</table>";
           console.log("your html string"+vQCTable);
          })



myApp.filter('QcDetailsManualAuto', function () {
return function (value) {
    var result = false;
    if (value.QCType == 'Auto' || value.QCType == 'Manual') { result = true; }
    return result;
};
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
</div>

＆＃13;

Answer 2

这样做：

var vQCT ='';
vQCT +="<table >";
                            vQCT +="<thead>";
                                vQCT +="<tr >";
                                    vQCT +="<th>SOM</th>";
                                    vQCT +="<th>EOM</th>";
                                    vQCT +="<th>Type of Error</th>";
                                    vQCT +="<th>QC Type</th>";
                                    vQCT +="<th>Remarks</th>";
                                    vQCT +="<th>Action</th>";
                                vQCT +="</tr>";
                            vQCT +="</thead>";
vQCT +="<tbody>";
                                vQCT +="<tr ng-repeat=\"QCTD in vQCTableData\" ng-if=\"QCTD | QcDetailsManualAuto\">";
                                        vQCT +="<td>{{QCTD.SOM}}</td>";
                                        vQCT +="<td>{{QCTD.EOM}}</td>";
                                        vQCT +="<td>{{QCTD.Parameter}}</td>";
                                        vQCT +="<td>{{QCTD.QCType}}</td>";
                                        vQCT +="<td>{{QCTD.Remarks}}</td>";
                                        vQCT +="<td>";
                                        vQCT +="<span ng-click=\"QCParameterEdit(QCTD)\" title=\"Edit\" class=\"glyphicon glyphicon-pencil QualityCheckIcons\"></span>";
                                        vQCT +="<span ng-click=\"DeleteMQC(QCTD.UID)\" class=\"glyphicon glyphicon-trash QualityCheckIcons deleteQC\"></span>";
                                        vQCT +="</td>";                                
                                vQCT +="</tr>";
                            vQCT +="</tbody>";
                        vQCT +="</table>";

var mediadiv = angular.element(document.querySelector('#mediadiv'));
        mediadiv.html($compile(vQCT)($scope));

var jData = JSON.parse(response.data);
         $scope.vQCTableData= jData.ResultData;

在您的回复部分

无法使用angular JS在动态创建的表中传递json行

2 个答案: