This question already has answers here:
Insert HTML into view from AngularJS controller
(17 answers)
Closed 6 years ago.
I have a directive with an ng-repeat that outputs a list.
When hover over one of the items, a tooltip will be displayed.
The problem is that the "hover" text isn't compiled, and is displayed as a normal string: "test".
How do I go about compiling it?
Thanks
$scope. items = [{
name: "Test1",
type: 0,
hover: "<h4>test</h4>"
}];
<li ng-repeat="item in items">
<div ng-if="activeItemIndex === $index">
<div>{{item.hover}}</div>
</div>
</li>
Angular escapes html by default. To render variable value as it is use ng-bind-html directive:
<div ng-if="activeItemIndex === $index">
<div ng-bind-html="item.hover"></div>
</div>
Related
I'm displaying two text-angular WYSIWYG fields in ng-repeat like so
<div data-ng-repeat="n in langInput.values" class="sell__description-container">
<h2 class="sell__heading-secondary">
Opis w języku: {{ n.selected }}
</h2>
<div text-angular="text-angular"
name="htmlcontent_{{n.id}}_{{ n.selected }}"
data-ng-model="descriptionHtml[$index]"
class="sell__text-editor"
required>
</div>
{{ descriptionHtml[$index] }}
And just below field I'm showing its model and it's working correctly. It shows text with all this tags which I chose in editor.
But 200 lines below I have something like summary and I want to display this model one more time in other ng-repeat loop:
<tr data-ng-repeat="n in langInput.values">
<td>Opis ({{ n.selected }})</td>
<td>
{{ descriptionHtml[$index] }}
<br>
{{ $index }}
</td>
</tr>
And here it is not showing description value. Althought $index is indeed 0 and 1 like above.. Why is that? How to fix?
At the moment I just want to make it work. Later on I'll not display it as a string in td but I'll pass this model as a string to function which will open bootstrap modal window in which I'll bind this string as html with ng-bind-html so it will be something like preview.
I found problem. I copied code from textangular docs and it has its own controller so my controller structure was like
<div ng-controller="external">
<div ng-controller="textEditor">
here i have ng-repeat and here i'm also displaying content of editor
</div>
here i tried to ng-repeat over it again
</div>
So in textEditor ctrl it was in right scope and it display correctly. I need to pass this value from child scope(textEditor) to parent scope(external).
Declaring $scope.descriptionHtml in parent controller solve the issue since child controller inherit scope and when I modify it in child then also parent is refreshed.
Here is the plunker link. I am trying to fetch the json data using Angularjs where data is like object of objects of array.
Plunker link with example
You need to iterate it over key and value in ng-repeat. check plunker
like
<div ng-repeat="(key, value) in questions">
{{key}}
<div ng-repeat="item in value">
version : {{item.version}}
</div>
</div>
your div tag is not closed properly....
<div ng-repeat="ques in questions">
<p>{{ques[0].version}}</p>
</div>
your ng-repeat div tag was closed before your tag.
Fixed Plunker Link
Plunker: for each sub version
Some code modifications as components properties are dynamic. hence, iterate it dynamic :
$scope.components = response.data.components;
$scope.questions = [];
for(var i in Object.keys($scope.components)) {
for(var j in $scope.components[Object.keys($scope.components)[i]]) {
$scope.questions.push($scope.components[Object.keys($scope.components)[i]][j]);
}
}
console.log($scope.questions);
});
updated Plnkr : https://plnkr.co/edit/PuvO6PrifWa5WtpeQrvY?p=preview
This question already has an answer here:
Can I put ng-if directive on an element which also binds to a controller
(1 answer)
Closed 7 years ago.
I'm trying to hide an entire <div> using ng-if, but my below code is not working, presumably because ng-if and ng-controller are assigned to the same <div>.
If I move the ng-if condition to any element within the parent <div> then it works fine, but I'd rather not do this because -
I'd have a superfluous DOM element visible, but with nothing inside of it.
I'd potentially have to include the same ng-if condition multiple times.
My question therefore is how can I hide the entire <div>, rather than just the elements within?
<div id="sidebar-recent" data-ng-controller="closestCtrl" data-ng-if="closestStation != false">
<h3>Closest Station</h3>
<ul class="stations-list" data-ng-model="closestStationsList">
<li class="station" data-ng-click="selectStation(recentStation)">
{{ closestStation.name }} ({{ (closestStation.code | uppercase) }})
</li>
</ul>
</div>
Here is the relevant JS -
var app = angular.module('myApp', [])
app.controller('closestCtrl', function($scope){
$scope.closestStation = false;
});
I suggest using ng-hide or ng-show instead.
The difference between those and ng-if is, that the latter removes the element from the DOM, and the former only hides the element using style rules.
Why do you want to remove the whole div? It won't work If you are using ng-if you are actually removing the element from DOM. So the controller scope will be also removed. I don't think it's possible
Simply add a another one div only for controller. It will solve your problem very easy... don't think too much..
Something like
<div data-ng-controller="closestCtrl">
<div id="sidebar-recent" data-ng-if="closestStation != false">
<h3>Closest Station</h3>
<ul class="stations-list" data-ng-model="closestStationsList">
<li class="station" data-ng-click="selectStation(recentStation)">
{{ closestStation.name }} ({{ (closestStation.code | uppercase) }})
</li>
</ul>
</div>
</div>
I have created a inline directive to display comments from a Java-Script Array. The structure of comments array is as follows
$scope.comments = [{
userName: 'TestUser',
comment : 'Parent Comment',
comments: [ ] //Holds the Replies
}];
I am programmatically adding the replies to comments array in the $scope.comments array.
The Inline Directive snippet is as follows
<div>
<script type="text/ng-template" id="categoryTree">
<div class="media-body">
<h4>{{ comment.userName }} </h4>
<p> {{ comment.comment }} </p>
</div>
<ul ng-if="comment.comments">
<li ng-repeat="comment in comment.comments" ng-include="'categoryTree'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="comment in comments" ng-include="'categoryTree'"></li>
</ul>
</div>
When I add the parent comments to $scope.comments, they are getting shown. However, when I add reply to comments array in the $scope.comments array, it is not getting shown.
Also, if I initialize the $scope.comments with all comments and replies in angular.element(document).ready, they are shown correctly
Please let me know where I am going wrong and how to fix it.
Other Info
All of this works correctly when I use directive in independent page, but started to get problems when I am using this content in "ng-view"
This behavior was considered as a bug, which has been fixed in the later versions of AngularJS. The above example works fine with AngularJS version 1.4.0
I am implementing in-place element editing in my Angular app and based my code on this answer https://stackoverflow.com/a/15453512/2026098, using an editing variable for each entry inside ng-repeat.
See http://jsfiddle.net/LYtQU/2/.
I would now like to access this variable from outside the scope of ng-repeat in order to conditionally show/hide an element. Basically, I would like to do something like ng-hide="if any entry has editing==true":
<div class="note" ng-hide="if any entry has editing==true">This should disappear when any entry is being edited</div>
<div class="entry"
ng-repeat="entry in entries"
ng-class="{'editing': editing}">
<span ng-hide="editing" ng-click="editing=true">{{ entry.name }}</span>
<span ng-show="editing" ng-click="editing=false">Editing entry...</span>
</div>
I am trying to avoid using jQuery as the editing variable seems perfect for the job, but just out of reach from my comprehension...
Set up a count in the controller and increment/decrement everytime editing is toggled. Then show the message if the count is 0.
function MainCtrl($scope) {
$scope.state = {editing: 0};
$scope.entries = [{name: 'Entry 1'}, {name: 'Entry 2'}];
};
<body ng-app>
<div ng-controller="MainCtrl">
<div class="note" ng-show="state.editing == 0">This should disappear when any entry is being edited</div>
<div class="entry"
ng-repeat="entry in entries"
ng-class="{'editing': editing}">
<span ng-hide="editing" ng-click="editing=true; state.editing = state.editing + 1">{{ entry.name }}</span>
<span ng-show="editing" ng-click="editing=false; state.editing = state.editing - 1">Editing entry...</span>
</div>
</div>
</body>
http://jsfiddle.net/LYtQU/5/