So I have the next div in index.html:
...
<div ng-include src="'templates/blocks.html'" ng-controller='Foo'></div>
...
The Foo controller holds an array of html snippets under the "bars" property.
The blocks.html looks like:
<div class="block" ng-repeat="bar in bars">
<div ng-bind-html-unsafe="{{bar}}"></div>
</div>
and what I'm getting is the html as text in the div with class "block", meaning it is not evaluated as html.
thanks.
ng-bind-html-unsafe is removed in 1.2. Use ng-bing-html instead and remove the curly braces just like Sebastian said.
Include ngSanitize module as a dependancy to your app and dont forget to include its JS
//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js.
Remove the curly braces in ng-bind-html-unsafe and it should work:
<div class="block" ng-repeat="bar in bars">
<div ng-bind-html-unsafe="bar"></div>
</div>
Just for completeness - here is a sample jsfiddle.
<div ng-repeat="item in tree" ng-include="'a.html'" class="node"></div>
a.html
<p> {{item.name}}</p>
controller.js
$scope.tree = [
{name: 'Узел', nodes: [] },
{name: 'Морской', nodes: []},
{name: 'Устричный', nodes: []}
];
Related
I have old project. In this moment i can not rewrite all to use ng-view and routes. So i have large html file and many unreadable code.
<div ng-if="f1">
<div>...</div>
</div>
<div ng-if="f2">
<div>...</div>
</div>
<div ng-if="f3">
<div>...</div>
</div> ....etc
I would like to break this code into blocks and use the ng-include to clean code. But then I will have a lot of this tag(> 10). Is it normal? Is there a way to reorganize the file differently?
<div ng-if="f1" ng-include="url1"> </div>
<div ng-if="f2" ng-include="url2"> </div>
<div ng-if="f3" ng-include="url2"> </div>
You should put your logic in an array in controller like this
$scope.paths = [
{url : "url1" , condition: $scope.f1},
{url : "url2" , condition: $scope.f2},
{url : "url3" , condition: $scope.f3},
];
And then use it in html like this
<div ng-repeat="item in paths"> <div ng-if="item.condition" ng-include="item.url"></div> </div>
You can create an array object and use ng-repeat on it.
HTML:
<div ng-repeat="template in templates">
<div ng-if="template.f" ng-include="template.url"> </div>
</div>
JS
//Array of objects that contain your checks and template urls
$scope.templates = [{
"url": value,
"f": value
}, {
"url": value,
"f": value
}, .....,
{
"url": value,
"f": value
}];
It is good to use ng-route but if you are not comfortable then
here is one hack.
Create one json data like this:
$scope.myAllTemplate = [{
"isShown":false, "url":"/myTemplateURL1","templateName":"Template1"},{
"isShown":false, "url":"/myTemplateURL2","templateName":"Template2"},{
"isShown":false, "url":"/myTemplateURL3","templateName":"Template3"}
]
Rendering the name of template from where you have to toggle the ng-if by click event
<div ng-repeat="item in myAllTemplate ">
<anyTag ng-click="changeTemplate(item)">item.templateName</anyTag>
</div>
Controller function
$scope.changeTemplate = function(data){
data.isShown = true;
//here you can handle the template according to your wish
}
Finally, render the template
<div ng-repeat="item in myAllTemplate ">
<div ng-if="item.isShown" ng-include="item.url"></div>
</div>
I'm currently building my first single page app with angularJS. The variable information stored in my controller is not displaying on the page. After extensively trying to trouble-shoot this I am at a loss to why it isn't displaying.
<div ng-repeat="x in pers" class="person">
<div class="name">{{ pers.person }}</div>
<div class="out">Out</div>
<div class="in" >In</div>
<div class="onsite">On site</div>
<div class="notes">
<div class='n'></div>
<div class='dn'>Delete note</div>
<div class='an'>Add note</div>
</div>
My controller looks like this.
app.controller("MainController", ['$scope', function($scope) {
$scope.pers = [
{
person: 'Nick',
},
{
person: "Greg",
}];
}]);
The repeat function works as expected and two tables are formed, however both the divs with the class name are left without any text in them on the page. I have tried using ng-binding="pers.person" as well without any success.
Thanks in advance for any help you can offer with this issue I'm having.
it should be {{x.person}}
you are using ng-repeat of pers with the alias x
I'm making a list with 'v-for' where each item has to have an if with a different value corresponding the array, but the Vue not allows to create a 'v-if' expression starting from {{ i.some_data_to_evaluate }} .
Have a way to solve this?
Here is my code:
HTML
<div id='test' v-for="i in items">
<p v-if={{i.value}}>{{i.some_text}}</p>
<p v-else>{{i.other_text}}</p>
</div>
JS
let test = new Vue({
el: '#test',
data: [
{some_text: 'jhon', other_text: 'jonas', value:false},
{some_text: 'joao', other_text: 'maria', value:true}
]
})
I'm just trying to change the version that is in the Vue guide.
Here's the link: http://vuejs.org/guide/list.html
You should replace the brackets with quotes on the v-if directive:
<div id="test" v-for="i in items">
<p v-if="i.value">{{i.some_text}}</p>
<p v-else>{{i.other_text}}</p>
</div>
How do I get an angular expression working inside a script tag... I am pretty new to this and need help?
Here is an example of my java script code:
<script id="modal-2.html" type="text/ng-template">
<div class="modal transparent">
<div class="card">
<i class="icon ion-ios7-close close-modal" ng-click="closeModal(2)"></i>
<div class="item item-divider">
{{card.title}}
</div>
<div class="item item-text-wrap">
{{card.details}}
</div>
</div>
</div>
</script>
Here is an example of my array:
.controller('TodoCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $ionicSideMenuDelegate) {
$scope.cardss =
{id:1, title:'Frank', src:'img/Frank.png',details:'This will be the products description!'},
{id:2, title:'Generali', src:'img/Generali.png',details:'This will be the products description!'},
{id:3, title:'John Lewis', src:'img/JohnLewis.png',details:'This will be the products description!'},
];
There is nothing special wrt use of AngularJS expressions inside partial templates.
As already said your model is actually array - so you'll have to iterate through the items using ng-repeat like this:
<ul>
<li ng-repeat="card in cards">
Card id: {{card.id}}
Card title: {{card.title}}
Card details: {{card.details}}
</li>
</ul>
Please see working JSFiddle example.
Here is an example how you can use your template:
<div ng-include src="'modal-2.html'"></div>
or use it with a button:
<button ng-click="currentTpl='modal-2.html'">Show Modal</button>
<div ng-include src="currentTpl"></div>
The expression in the template then works as is usual.
Here is an example.
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left" ?
In this example it behaves exactly the same, but I use similiar code in a project and there it behaves differently. I suppose it's because of Angular scopes.
Maybe I shouldn't use ng-if, please explain me how to do it better.
The pane.html is:
<div ng-if="!isArray(item.left)">
<div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
<div ng-if="!isArray(item.left)">
<div ng-init = "item = item.left" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-init="item = item.right" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
The controller is:
var app = angular.module('mycontrollers', []);
app.controller('MainCtrl', function ($scope) {
$scope.tree = {
left: {
left: ["leftleft"],
right: {
left: ["leftrightleft"],
right: ["leftrightright"]
}
},
right: {
left: ["rightleft"],
right: ["rightright"]
}
};
$scope.isArray = function (item) {
return Array.isArray(item);
}
});
EDIT:
First I run into the problem that the directive ng-repeat has a greater priority than ng-if. I tried to combine them, which failed. IMO it's strange that ng-repeat dominates ng-if.
It's a little hacky, but I am passing variables to an ng-include with an ng-repeat of an array containing a JSON object :
<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div>
In your include page you can access your variable like this:
<p>{{pass.text}}</p>
Pass parameter to Angular ng-include
You don't need that. all ng-include's sources have the same controller. So each view sees the same data.
What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left"
[1]
ng-init="item = item.left" means - creating new instance named item that equals to item.left. In other words you achieve the same by writing in controller:
$scope.item = $scope.item.left
[2]
ng-repeat="item in item.left" means create list of scopes based on item.left array. You should know that each item in ng-repeat has its private scope
I am trying to display a binary tree of elements, which I go through recursively with ng-include.
I posted in the past answer how to display tree by using ng-include.
It might helpful: how-do-display-a-collapsible-tree
The main part here that you create Node with id wrapped by <scipt> tag and use ng-repeat:
<script type="text/ng-template" id="tree_item_renderer">
<ul class="some" ng-show="data.show">
<li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li>
</ul>
</script>
<ul>
<li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'"></li>
Making a generic directive instead of ng-include is a cleaner solution:
Angular passing scope to ng-include
I am using ng-include with ng-repeat of an array containing string. If you want to send multple data so please see Junus Ergin answer.
See my code Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div ng-repeat="name in ['Sanjib Pradhan']" ng-include="'your_template.html'"></div>
<div ng-repeat="name in ['Chinmay Sahu']" ng-include="'your_template.html'"></div>
<script type="text/ng-template" id="your_template.html">
{{name}}
</script>
</div>