Question

我正在跟随AngularJS和Coldfusion的代码并尝试解析JSON，使用cfc我将获得JSON格式的数据：

[{"HIRE_DATE":"26 Jun 86","FIRST_NAME":"<a href=javascript:void(0);>Georgi<\/a>","EMP_NO":10001,"BIRTH_DATE":"02 Sep 53"},{"HIRE_DATE":"21 Nov 85","FIRST_NAME":"<a href=javascript:void(0);>Bezalel<\/a>","EMP_NO":10002,"BIRTH_DATE":"02 Jun 64"},{"HIRE_DATE":"28 Aug 86","FIRST_NAME":"<a href=javascript:void(0);>Parto<\/a>","EMP_NO":10003,"BIRTH_DATE":"03 Dec 59"},{"HIRE_DATE":"01 Dec 86","FIRST_NAME":"<a href=javascript:void(0);>Chirstian<\/a>","EMP_NO":10004,"BIRTH_DATE":"01 May 54"},{"HIRE_DATE":"12 Sep 89","FIRST_NAME":"<a href=javascript:void(0);>Kyoichi<\/a>","EMP_NO":10005,"BIRTH_DATE":"21 Jan 55"},{"HIRE_DATE":"02 Jun 89","FIRST_NAME":"<a href=javascript:void(0);>Anneke<\/a>","EMP_NO":10006,"BIRTH_DATE":"20 Apr 53"},{"HIRE_DATE":"10 Feb 89","FIRST_NAME":"<a href=javascript:void(0);>Tzvetan<\/a>","EMP_NO":10007,"BIRTH_DATE":"23 May 57"},{"HIRE_DATE":"15 Sep 94","FIRST_NAME":"<a href=javascript:void(0);>Saniya<\/a>","EMP_NO":10008,"BIRTH_DATE":"19 Feb 58"}]

问题是，它在ng-grid中加载：

*** hire_date first_name emp_no birthdate

12 sep 89 <a href=javascript:void(0);>Anneke</a> 10005 20 apr 53 ***

所以它不会呈现为链接，因此我可以点击打开，

这里是角度JS代码

if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('workData.cfc?method=getEmployees&returnformat=json').success(function (largeLoad) {      
                    data = largeLoad.filter(function(item) {
                            return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.myData = angular.fromJson(data);
                    $scope.setPagingData($scope.myData,page,pageSize);
                });            
            } else {
                $http.get('workData.cfc?method=getEmployees&returnformat=json').success(function (largeLoad) {
                    $scope.myData = angular.fromJson(largeLoad);
                    $scope.setPagingData($scope.myData,page,pageSize);
                });
            }

Answer 1

我不太确定以下内容是否完全正确 - 现在无法检查。至少这个想法应该是有效的！

cellTemplate将使用的默认ngGrid是：

<div class="ngCellText" ng-class="col.colIndex()">
  <span ng-cell-text>{{row.getProperty(col.field)}}</span>
</div>

正如您所看到的，FIRST_NAME包含在内联表达式中 - 例如{{}}，所以angular会逃脱你的所有内容。

您必须确保您的内容通过$sce.trustAsHtml功能进行地理定位，并由ng-bind-html包含在内。我会在你的控制器中定义一个函数，如下所示：

$scope.trust = function(value){
    return $sce.trustAsHtml(value);
}

之后你必须像这样定义你自己的cellTemplate：

<div class="ngCellText" ng-class="col.colIndex()">
  <span ng-cell-text ng-html-bind="trust(row.getProperty(col.field))"></span>
</div>

并配置您的单元格定义：

columnDefs: [
  { field: 'FIRST_NAME', 
    displayName: 'First Name',  
    cellTemplate: '<div> ... </div>' }, ...

有关如何模板化ngGrid的更多信息，请访问github wiki：https://github.com/angular-ui/ng-grid/wiki/Templating

Json解析HTML Href标记的问题

1 个答案: