Develop Reference

'Echo' html from string in angularjs when the string is on a template

I am using ionic tinder cards and each new card should be inserted in an predefined array as an object, likewise:
{text: "some_text"}
However, I might be getting html in the string and I want that html to be rendered. How can I do this considering the object above goes to a predefined array, something happens on the ionic code and then I inject it like this?
<div class="card">
{{card.text}}
</div>

use ng-bind-html directive: may be require import the sanitize module
<div class="card">
<span ng-bind-html="card.text"></span>
</div>

You should use ng-bind-html
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
If your HTMl contains potentially dangeorus tag (like script tag), you should sanitize it before

Compare angular index variable in smarty tags

I want to catch the first iteration in ng-repeat directive:
<div ng-repeat="product in products">
<div is-open="{if "[[$index]]" == 0}true{else}false{/if}">
...
</div>
</div>
But it doesn't work. Setting 0 as string also doesn't work. Comparing in angular also doesn't work.
How can I do that?

Try:
<div is-open="{{$index == 0}}"></div>

You should use special property $first of ng-repeat with ternary operator. Like see below snippet
<div ng-repeat="product in products">
<div is-open="($first) ? true : false">
...
</div>
</div>
I suppose smarty code will not work as you're expecting. Smarty is a server side programming language and angular runs on client side. In your query, smarty tags are unnecessary being called in angular directive. Above trick will work for you.
There are also some couple of special properties available too. You can check them out here

How can I pass a variable into an ng-include?

I have the following code:
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
then in itemG.html I have:
<img src="{{item.image}}">
How can I get my ng-repeat to print out all of the images?

There are 2 potential problems in the code...
src="itemG.html" needs an extra pair of single quotes like this:
<div ng-repeat="item in items">
<div ng-include="'itemG.html'"></div>
</div>
And the img tag is missing a closing ":
<img ng-src="{{item.image}}">
Plunker: http://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview

Basically, what this comes down to is that the browser will interpret what inside the src attribute literally, until angular comes along to replace it. If you have a string constant, you can use single quotes inside the src="'myurl.html'", but if you have a value that needs to be bound by angular, you have to use ng-src and the expression syntax of {{ }}
You also need to bind a model to your template file itself. It's not going to pick up the bindings from your repeater without some help from either the ng-include event directives, or it's own model/controller/directive. There are too many different ways to demonstrate that, and it's also relevant on what markup is in your template file, which I can't say.
However, if the img tag is the only thing in that file, then instead of the file, I'd just do this:
<div ng-repeat="item in items">
<img ng-src="item.image" />
</div>
Since you're inside a repeat, it's already being included, making the ng-include redundant.

In principal code
<div ng-repeat="item in items">
<ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>
then in itemG.html I have:
<img src="{{i.image}}">

ng-repeat PHP variables

I have a problem with ng-repeat and ng-init. It doens'nt show me the content nor the ID when i ask for them in my code (project.content). But it doesn't show the text itself either. So somewhere something is going wrong. Note that I use other open and close tags for angular as default.
Appareantly Angular sees something different in the code as the browser or I do, as I recieve this console error:
http://errors.angularjs.org/1.2.12/$parse/ueoe?p0=projects%20%3D%20%7B
<table ng-init="projects = {" id":"1","content":"testtesttest"}="" "="">
How can I get this to work?
HTML code:
<div ng-app="overviewApp">
<table ng-init="projects = <?=json_encode($projects)?> ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>
Looks like this when in browser source code:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
<div class="content-section">
<div ng-app="overviewApp">
<table ng-init="projects = {"id":1,"content":"TestTestTest"} ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>

It cannot parse it because it is seeing double quotes inside double quotes. Try using single quotes.
<table ng-init='projects = <?=json_encode($projects)?> '>
Also you must ensure that projects is in array format like so:
ng-init='projects = [{"id":1,"content":"TestTestTest"}]'
Finally, since you are using a custom interpolate providers {[{ and }]}, you must define that in your config:
app.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[{[');
$interpolateProvider.endSymbol(']}]');
}]);
See it working: DEMO
Alternatively, instead of using interpolation markup, I would recommend using the ng-bind directive like so:
<td><span ng-bind="project.content"></span></td>
See a DEMO.
NOTE: The AngularJS documentation recommends using a controller over the ng-init directive to initialize values on a scope.

ng-include dont work on ng-show

I have a simple angular app but the template is growing. I want to split it and use the ng-include directive but I can't get it to include correctly.
current template.html
<div class="edit-object-form" ng-show="editable">
<!-- ... -->
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
desired template.html
<div class="edit-object-form" ng-show="editable">
<div ng-include="/partials/edit_objet_form.html"></div
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
The default value of editable is false, but when I switch to true the include directive doesn't work.
Note: I'm using Angular-1.0.7

I'm not able to recreate this issue. Take a look at this plunker that loads two different templates. (The both look odd, since they're templates stolen from other plunkers to allow for xss).
Maybe this issue is caused by the two incomplete div ending tags, that are .