I am trying to do the following:
I have a json array of questions which I pass like this:
<a href=""
...
title="Questions"
data-content="{{item.questions}}"
data-template="popover.question.tpl.html"
...
bs-popover>
{{item.questions.length}}
</a>
and a template 'popover.question.tpl.html' that contains the following code:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in content">
{{question.text}}
</li>
</ul>
</div>
</div>
The problem is probably that the content is passed as a string by the directive, leading in the ng-repeat not working. If I just evaluate "{{content}}" I get the actual json data in my div but obviously I can't work with that. Any ideas on how to do that? Do I have to create a separate controller for that (which I would like to avoid)?
data-content will accept only string. So object cannot be passed through that.
Angular-strap popover will inherit the scope from where it is getting opened.
So, in your popover.question.tpl.html you can directly access item.questions.
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in item.questions">
{{question.text}}
</li>
</ul>
</div>
</div>
Check this plunker for working example.
Related
i'm creating a angular app, and have an strange issue.
This is my controller:
angular.module('clientApp')
.controller('AdminCtrl', function ($scope) {
});
This is my view:
<div class="admin" ng-controller="AdminCtrl">
<div ng-include="'/views/partials/header-admin.html'"></div>
<p>This is the admin view.</p>
</div>
the thing is when i run the app the ng-include appears comment out:
<!-- ngInclude: '/views/partials/header-admin.html' -->
but if i remove the ng-controller of my view it renders the ng-include without problems:
<div class="admin" >
<div ng-include="'/views/partials/header-admin.html'"></div>
<p>This is the admin view.</p>
</div>
html:
<div ng-include="'/views/partials/header-admin.html'" class="ng-scope"><header class="ng-scope">
<div class="logo">
<div class="user-preferences"></div>
</div></header>
<nav class="left-nav ng-scope">
<ul>
<li>
Dashboard
</li>
<li>
Temas (Materias)
</li>
<li>
Sitios
</li>
<li>
Grupos
</li><!--
<li>
Dashboard
</li> -->
</ul>
</nav></div>
First of all, you have an error in your partial view code. You can't have a ng-include pointing to the same file:
<div ng-include="'/views/partials/header-admin.html'" class="ng-scope"><header class="ng-scope">
if you do that you have to recive some error like:
because you create a infinite bucle with the includes files, so the first thing that you have to do is remove the include in your partial file. I think this should not have any more problem!
I have a card grid layout in my HTML code, to get/load the dynamic data for the same I need to call a function say loadRoomObjects in the DIV tag as shown in the below code
<div class="card_grid widget uib_w_33 wrapping-col d-margins flex-basis-33" data-uib="layout/card_grid" data-ver="0">
<div class="widget widget-container content-area vertical-col uib-card uib_w_34 section-dimension-34 cpad-0" data-uib="layout/card" data-ver="0">
<h4 class="card-tittle">{{testing(Room)}}</h4>
<div class="list-group widget uib_w_38 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
<a class="list-group-item allow-badge widget uib_w_39" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">bed</p>
</a>
<a class="list-group-item allow-badge widget uib_w_40" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">Stove</p>
</a>
<a class="list-group-item allow-badge widget uib_w_41" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<p class="list-group-item-text">Tap</p>
</a>
</div>
</div>
I am not sure how to achieve this using the given directives in AnjularJS, as I could not find a suitable ng-directive which call a perticular function in the controller.
Can you try calling loadRoomObjects function using ng-init directive .
The ngInit directive allows you to evaluate an expression in the current scope.
it can be used with div like :
<div ng-init="loadRoomObjects()" ></div>
Check the docs here
Is your problem as simple as creating a Scope variable to store the room objects (i.e.. $scope.room_objects = loadRoomObjects()). Call ng-repeat="roomObject in room_objects" on your div in HTML code
Ctrl:
$scope.room_objects = loadRoomObjects();
HTML:
<div ng-repeat="room_object in room_objects" class="card_grid widget ...">
....
</div>
Additionally we can keep a watcher on room_objects scope variable to keep the HTML in sync with the Ctrl code.
My index.html page is like following:
<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
<div ng-view></div>
</div>
For this ng-view I have record-list.html to show all the records which is like following:
<div class="container">
<ul class="design">
<li id="{{record.name}}" ng-repeat="record in records">
<div>......</div>
</li>
</ul>
</div>
Now i want to add the same structure (as like each record) append on the click of each item of the side panel.
what is the logic for that ?
My recent UI Looks like this & i want to add the same structure on each click which should be append the existing structure.
Please Help.Thanks.
It sounds like perhaps each "record" has a set of children "records." If this is the case, I would recommend using angular's ng-switch directive to conditionally display the correct (or no) set of sub-records on the side.
I've got the following AngularJS structure
<li ng-repeat="content in contents">
<img src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
But if "content.image_url" is NULL or it doesn't exist, I don't want to display the IMG tag. So something like
{{#if content.image_url}}
<img.....
{{/if}}
Which is the handlebarjs way of doing a conditional check. How could I achieve this in AngularJS? Do I need a directive to do this?
Use ng-show:
<li ng-repeat="content in contents">
<img ng-show="content.image_url != ''" src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
Also, I would use ng-src instead of src to avoid errors in the console while the image is loading:
<li ng-repeat="content in contents">
<img ng-show="content.image_url != ''" ng-src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
I want to use the index of the parent list (foos) as an argument to a function call in the child list (foos.bars).
I found a post where someone recommends using $parent.$index, but $index is not a property of $parent.
How can I access the index of the parent ng-repeat?
<div ng-repeat="f in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething($parent.$index)">Add Something</a>
</div>
</div>
</div>
My example code was correct and the issue was something else in my actual code. Still, I know it was difficult to find examples of this so I'm answering it in case someone else is looking.
<div ng-repeat="f in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething($parent.$index)">Add Something</a>
</div>
</div>
</div>
According to ng-repeat docs http://docs.angularjs.org/api/ng.directive:ngRepeat, you can store the key or array index in the variable of your choice. (indexVar, valueVar) in values
so you can write
<div ng-repeat="(fIndex, f) in foos">
<div>
<div ng-repeat="b in foos.bars">
<a ng-click="addSomething(fIndex)">Add Something</a>
</div>
</div>
</div>
One level up is still quite clean with $parent.$index but several parents up, things can get messy.
Note: $index will continue to be defined at each scope, it is not replaced by fIndex.
Take a look at my answer to a similar question.
By aliasing $index we do not have to write crazy stuff like $parent.$parent.$index.
Way more elegant solution whan $parent.$index is using ng-init:
<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
<li class="section_title {{section.active}}" >
{{section.name}}
</li>
<ul>
<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info
You can also get control of grand parent index by the following code
$parent.$parent.$index
You can simply use use $parent.$index .where parent will represent object of parent repeating object .
$parent doesn't work if there are multiple parents. instead of that we can define a parent index variable in init and use it
<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
<div>
<div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
<a ng-click="addSomething(parentIndex)">Add Something</a>
</div>
</div>
</div>