I'm having a weird issue, I can access all the elements coming from my scope as data model, also I can see the scope elements in the Chrome console, but when I try using the model within a ng-repeat statement it does not work, it just does not loop through the vm.menu.items. Below is my simple code:
<body ng-controller="mainController">
<div ng-controller="app.views.layout.header as vm">
<p>{{vm.currentMenuName}} {{vm.menu.items[0].displayName}} {{vm.menu.items[1].displayName}}</p> **<<----- IT works!**
<ul>
<li ng-repeat="menuItem in vm.menu.items">
<span>Not working! </span>{{menuItem.displayName}}
</li>
</ul>
</div>
</body>
I'm still pretty new to angular, so any help that point me into the right direction will be greatly appreciated.
I removed the 'vm.' in your html and everything works as expected
<body ng-controller="mainController">
<div ng-controller="app.views.layout.header as vm">
<p>{{currentMenuName}} {{menu.items[0].displayName}} {{menu.items[1].displayName}}</p>
<ul>
<li ng-repeat="menuItem in menu.items">
<span>Not working! </span>{{menuItem.displayName}}
</li>
</ul>
</div>
http://plnkr.co/edit/1BtC8p1ViqKXSbCWE3Kj?p=preview
Or you can us 'this' in your controller instead of $scope (see http://plnkr.co/edit/1BtC8p1ViqKXSbCWE3Kj?p=preview
Related
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.
Im getting json from some web service and displaying it with ng-repeat but i can't seem to display item properties.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item}}</p>
</li>
</ul>
This works and will display all json
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item.name}}</p>
</li>
</ul>
This doesnt work.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item[0].name}}</p>
</li>
</ul>
This works but will only display 1 item.
I just started working with angular and i feel im missing something becouse of it, if needed ill try to post a jfiddle of a sample.
UPDATE
im tring to get twitch.tv stream info
https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#get-streams
raw json from 2 streams, what i get from the first example
http://pastebin.com/bQLqu9BR
UPDATE 2
my code
http://plnkr.co/edit/3eOZ598zt2hkrJcsOLhP
Hmmm... I seem to be able to work with the sample data you provided.
See the following:
http://plnkr.co/edit/M3TQ4qI1DJPtgv6jCQLy?p=preview
Snippet:
<ul>
<li ng-repeat="item in srcData">
<p ng-bind="item.game"></p>
<p ng-bind="item.channel.display_name"></p>
<p ng-bind="item.channel.url"></p>
</li>
</ul>
You don't need to include an index for each item to display its properties, every item knows its index number and you can access it using the $index variable.
Check this out:
http://plnkr.co/edit/ECyyFYVupVG7mKqwsGaB
<ul>
<li ng-repeat="item in itemList">
{{$index}}
<p>
Game: {{item.game}}
</p>
<p>
Channel Name: {{item.channel.name}}
</p>
</li>
</ul>
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 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>
Has anyone come up with any solution to the JQuery Mobile UL List View?
I'm currently using JQuery Mobile 1.1.2 Alpha, and the bug I am referring to is an old one:
jQuery Mobile proper way to initialize a listview
My list view looks like this:
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
I have tried to use:
$( "#store-info" ).listview();
and also this:
$('#stores_main_view').trigger('create');
on the following
<div data-role="content" id="stores_main_view" class="content ui-content" role="main">
<ul data-role="listview" class="ui-listview">
<li>
<form class="product-form">
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
</form>
</li>
</ul>
</div>
Both yield the same error when trying to create a list dynamically:
Uncaught TypeError: Cannot read property 'jQuery1710409190776059404' of undefined
Is there any good solution to this problem yet?
The jQuery mobile code (in the method _createSubPages, exactly the one you quoted in the comment) is expecting created controls to be in a .ui-page.
Simply adding the class on the page where the control resides before calling trigger('create') fixed the problem for me.
$('#page-id').addClass('ui-page')
It also works if you do a
$.mobile.loadPage('#page-id')
Hope this helps.
Try this:
$("#nav-panel").load("nav-panel.html", function () {
$(this).trigger("create");
});