AngularJS add text inside <div>
In jQuery, I can do something like the following to add the desired text inside a div or any element.
$( "#div1" ).html( "<span class='red'>Hello <b>Again</b></span>" );
How can I accomplish a similar operation using AngularJS.
I need to add normal text inside a div when the user clicks on a link.
Here's what I've tried:
View:
<a ng-click="showProductText($index)">Click Me</a>
ng-controller:
$scope.showProductText = function () {
var myEl = angular.element(document.querySelector('#customerProductCatalogText'));
--need help hence forth--
};
+3
source to share
4 answers
This link helped me solve the angular.element issue
This did the trick:
angular.element(document.querySelector('#customerProductCatalogText')).html("NewText");
+1
source to share
You can do it in a different "more angular then jQuery" with the "ng-if" directive, please see here 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."},
];
});
0
source to share