在ng-bind中添加內容之前的html元素

我有一個由ng-repeat呈現並使用ng-bind綁定到模型的表。我想根據條件在第一列添加一個html元素。我怎樣才能做到這一點？在ng-bind中添加內容之前的html元素

<!doctype html> 
<html ng-app="plunker"> 

<head> 
<script data-require="[email protected]*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 

<body> 
<div ng:controller="MainCtrl"> 

<table border="1"> 
    <thead style="font-weight: bold;"> 
    <tr> 
     <th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="formatValue(row[column.id], column.id == 'Value1')"></td> 
    </tr> 
    </tbody> 
</table> 
</div> 




<script> 
var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $filter) { 



    $scope.formatValue = function(value, addIcon) { 

    if (addIcon) { 
     var htmlElement = '<span>This is a SPAN</span>' 

     value = htmlElement + value; 
    } 

    return value; 
    } 


    $scope.columnsTest = [{ 
    id: 'Value1', 
    checked: true 
    }, { 
    id: 'Value2', 
    checked: true 
    }, { 
    id: 'Value3', 
    checked: true 
    }]; 


    $scope.rows = [{ 
    id: 1, 
    "Value1": 911, 
    "Value2": 20, 
    "Value3": 20 
    }, { 
    id: 2, 
    "Value1": 200, 
    "Value2": 20, 
    "Value3": 20 
    }]; 



});

我想我的HTML元素的值之前被渲染。我試過使用$範圍但這並不奏效。該跨度仍然是一個文本。

這裏是一個Plunker

來源

2015-12-22 MrProgram

你不想控制器瞭解HTML什麼。所以不要這樣做。相反，使用ngIf指令有條件地添加跨度：

<tr ng-repeat="row in rows"> 
    <td ng-repeat="column in columnsTest" ng-if="column.checked"> 
     <span ng-if="column.id == 'Value1'">ICON</span> 
     {{ row[column.id] }} 
    </td> 
</tr>

演示：http://plnkr.co/edit/oUtzD2lQoF29PyOgs2k4?p=info

來源

2015-12-22 16:49:21 dfsq

非常感謝您更好的渲染性能。我不知道ng-bind會在td元素 – MrProgram

內產生與wrint {{}}相同的結果。歡迎您。是的，ngBind基本上是'{{}}'標籤的屬性版本。 – dfsq

你需要使用ng-sanitize，與ng-bind-html

ng-bind-html將

..插入HTML結果到以安全的方式的元素。默認情況下，生成的HTML內容將使用$的sanitize服務進行消毒..

var app = angular.module('plunker', ['ngSanitize']); 

$scope.formatValue = function(value, addIcon) { 

    if (addIcon) { 
     var htmlElement = '<span>This is a SPAN</span>' 

     value = htmlElement + value; 
    } 

    //note that value is wrapped by a span because `ng-bind-html` needs the html with root html. 
    return "<span>"+value+"</span>"; 
    }

這裏是更新PLUNKER

來源

2015-12-22 16:47:44

包括ngSanitize和使用ngBindHTML

<script data-require="[email protected]*" data-semver="1.2.0" src="https://code.angularjs.org/1.2.0/angular-sanitize.js"></script> 
... 
var app = angular.module('plunker', ['ngSanitize']); 
... 
<td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind-html="formatValue(row[column.id], column.id == 'Value1')"></td>

Plunker

來源

2015-12-22 16:47:51

當綁定html臨時晚了，你應該使用$sce服務與ngBindHtml指令

見：Updated Plunker

來源

2015-12-22 16:48:59 MarkoCen

可以使用NG-是否顯示跨度取決於伍重複提供的「$第一個」布爾。

<tr ng-repeat="row in rows"> 
     <td ng-repeat="column in columnsTest" ng-if="column.checked"> 
     <span ng-if="$first">This is a SPAN</span> 
     {{row[column.id]}} 
     </td> 
    </tr>

http://plnkr.co/edit/Dy2nA7m53GUdnlQG1JAW?p=preview

編輯：使用NG-如果用長列表

來源

2015-12-22 16:50:32 Rorschach120

如果您不想使用「{{}}」，那麼只需爲該值添加另一個跨度並使用「ng-bind」 – Rorschach120

在ng-bind中添加內容之前的html元素

回答

相關問題