Javascript 通过在绑定中将html元素添加到内容之前_Javascript_Angularjs

Javascript 通过在绑定中将html元素添加到内容之前

javascript angularjs

Javascript 通过在绑定中将html元素添加到内容之前,javascript,angularjs,Javascript,Angularjs,我有一个由ng repeat呈现的表，并使用ng bind绑定到一个模型。我想根据条件在第一列中添加一个html元素。我该怎么做 <!doctype html> <html ng-app="plunker"> <head> <script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></scr

我有一个由ng repeat呈现的表，并使用ng bind绑定到一个模型。我想根据条件在第一列中添加一个html元素。我该怎么做

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

<head>
<script data-require="angular.js@*" 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
  }];



});


var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope，$filter）{
$scope.formatValue=函数（值，addIcon）{
如果（addIcon）{
var htmlElement='这是一个跨度'
值=htmlElement+值；
}
返回值；
}
$scope.columnsTest=[{
id:'Value1'，
核对：正确
}, {
id:'Value2'，
核对：正确
}, {
id:'Value3'，
核对：正确
}];
$scope.rows=[{
id:1，
“值1”：911，
“价值2”：20，
“价值3”：20
}, {
id:2，
“价值1”：200，
“价值2”：20，
“价值3”：20
}];
});

我希望我的html元素在值之前呈现。我尝试过使用$scope，但没有成功。跨度仍然以文本形式出现

以下是您需要使用的

，带有

ng bind html

将

。。以安全的方式将生成的HTML插入元素中。默认情况下，生成的HTML内容将使用$sanitize服务进行清理

var-app=angular.module（'plunker'，['ngSanitize']）；
$scope.formatValue=函数（值，addIcon）{
如果（addIcon）{
var htmlElement='这是一个跨度'
值=htmlElement+值；
}
//请注意，值由一个span包装，因为'ng bind html'需要带有根html的html。
返回“+值+”；
}

以下是更新的

包括和使用


...
var app=angular.module（'plunker'，['ngSanitize']）；
...

绑定html模板时，应使用带有

ngBindHtml

指令的

$sce

服务

请参阅：

您不想让controller了解HTML。所以不要那样做。相反，使用ngIf指令有条件地添加span:

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


偶像
{{row[column.id]}

演示：

根据ng repeat提供的“$first”布尔值，您可以使用ng if来显示范围

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


这是一个跨度
{{row[column.id]}

编辑：使用ng if可提高长列表的渲染性能

，如果您不想使用

{{}

，则只需为值添加另一个跨度，并使用

ng bind

，非常感谢。我不知道ng bind会在td元素中产生与wrint{{}}相同的结果。是的，ngBind基本上是

{{}

标记的属性版本。

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

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