Question

在jQuery中，我可以执行以下操作，在div或任何元素中添加所需的文本。

$( "#div1" ).html( "<span class='red'>Hello <b>Again</b></span>" );

如何使用AngularJS执行类似的操作。

当用户点击链接时，我需要在div中添加纯文本。

以下是我的尝试：

查看：

<a ng-click="showProductText($index)">Click Me</a>

纳克控制器：

$scope.showProductText = function () {
   var myEl = angular.element(document.querySelector('#customerProductCatalogText'));
   --need help hence forth--
    };

Answer 1

在视图中

<div style="border:1px solid #ccc;padding:10px;" ng-bind-html="divText"></div>

和控制器

$scope.divText = '<H2>some text</H2>';

Answer 2

此链接帮助我解决了问题angular.element

这就是诀窍：

angular.element(document.querySelector('#customerProductCatalogText')).html("NewText");

Answer 3

你可以用不同的方式做到这一点＆＃34;更有棱角，然后jQuery＆＃34;使用指令＆＃34; ng-if＆＃34;请看这里 http://jsbin.com/tuvom/1/edit

<强> HTML

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <div ng-repeat="item in products">
      <h4>{{item.name}}</h4>
      <button ng-if="!item.showdescription" ng-click="item.showdescription= !item.showdescription">Show description</button>
      <button ng-if="item.showdescription" ng-click="item.showdescription= !item.showdescription">Hide description</button>
      <p ng-if="item.showdescription">{{item.description}}</p>
    </div>
      </div>
</body>

<强> JS

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

app.controller('firstCtrl', function($scope){

  $scope.products = [

    {name:"item one", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
    {name:"item two", description:"so the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},

  ];
});

Answer 4

试试这个

angular.element('#customerProductCatalogText').innerHTML="<span class='red'>Hello <b>Again</b></span>";

AngularJS在<div> </div>中添加文本

4 个答案: