How would one join collections with Firebase and then later use it in an angular repeat?
Heres my database structure in Firebase:
I want to join wishes with the appropriated list and listId - but how?
And would I be able to do as such?:
<ul>
<li ng-repeat="list in lists">{{list.listName}}
<ul>
<li ng-repeat="wish in lists.wishes">{{wish.itemName}}</li>
</ul>
</li>
</ul>
Hope thing make sense!
You could try below snippet.
<ul>
<li ng-repeat="list in lists">{{list.listName}}
<ul>
<div ng-repeat="wish in lists.wishes">
<li>{{wish.itemName}}</li>
<li>{{list.listId}}</li>
<div>
</ul>
</li>
</ul>
<div> inside ul is not allowed but in HTML5 it will work without breaking anything, Refer Link
Related
I have a project with Angular where I don't want to use a select element with ng-options, so I made up a list with different options in order to select one of them.
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry"><p>{{c.name}}</p></li>
</ul>
</div>
So the option selected would modify another element where the chosen option would be displayed.
<div>
<ul>
<li>{{selectedCountry}}</li>
</ul>
</div>
In order to do that, I would need to pass the data from the chosen option of the first element into the 2nd one. I have tried doing something like this
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry = {{c}}"><p>{{c.name}}</p></li>
with no success.
You can check the plunker here Thanks in advance
I suggest you to use a function over there like this in the DEMO
<li ng-repeat="c in shippingCountry" ng-click="Click(c)"><p>{{c.name}}</p></li>
Having this method in your controller
$scope.Click=function (c)
{
$scope.select=c;
}
It creates child scope for each iteration, so explicitly refer parent scope:
Change like this,
<ul>
<li ng-repeat="c in shippingCountry" ng-click="$parent.selectedCountry = c"><p>{{c.name}}</p></li>
</ul>
DEMO
I've fixed your plunker here. It would be better to use methods in scope for this operations because they work in current scope, not in child
<li ng-repeat="c in shippingCountry" ng-click="selectCountry(c)">
<p>{{c.name}}</p>
</li>
// .html
<div>
<ul>
<li>{{selectedCountry.item}}</li>
</ul>
</div>
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry.item = c"><p>{{c.name}}</p></li>
</ul>
</div>
// controller
$scope.selectedCountry = {
item: $scope.shippingCountry[0]
};
Example
I am trying to avoid using the same filter on the same collection multiple times in AngularJS application.
What is the correct way to do it:
<div ng-app="myApp" ng-controller="PeopleCtrl">
<ul ng-init="(person in people|filter:{show:true}) as myPeople" ng-if="myPeople.length>0">
<h4>My People</h4>
<li ng-repeat="person in myPeople">{{person.name}}; display: {{person.show}};
</ul>
</div>
CODE PEN
When I use (person in people|filter:{show:true}) as myPeople I try to use an alias in order to not repeat the same filter{show:true} everywhere...
You should do it something like this:
<div ng-init="myPeople = (people | filter:{show:true})">
<div ng-if="myPeople.length>0">
<h4> My People</h4>
<ul>
<li ng-repeat="person in myPeople">
{{person.name}}; age: {{person.age}}; show: {{person.show}};
</li>
</ul>
</div>
</div>
I have the following data which i want to use ng repeat on:
$scope.doctors=[{patch:'BARIJPUR',doctor:'RAMA SENA',doctor:'SMRITI IRANI',doctor:'JAGDISH NAIR',
patch:'KIRI',doctor:'ASHISH NAIK',doctor:'SMRITI IRANI',doctor:'SAIRAJ NAIK',
patch:'JAMNAGAR',doctor:'RATAN PANDEY',doctor:'RAMAN SHIVOLKAR'
}];
Im trying to use it like this:
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' >{{doc.patch}}</span>
<ul>
<li><span>{{doc.doctor}}</span></li>
</ul>
</li>
</ul>
</div>
the current output im getting is shown in the following link:
current output
the expected output im getting is shown in the following link:
expected output
am i doing something wrong? have been at it for 1 and half hour now!
From your comment I assume that you're having a problem with the JS associative array, so here is an example of implementation:
$scope.doctors=[
{patch:'BARIJPUR',doctors:['RAMA SENA' 'SMRITI IRANI', 'JAGDISH NAIR',]},
{patch:'KIRI', doctors:['ASHISH NAIK', 'SMRITI IRANI', 'SAIRAJ NAIK']},
{patch:'JAMNAGAR', doctors:['RATAN PANDEY', 'RAMAN SHIVOLKAR']}
];
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' ng-repeat="doc in doctors"><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doctor in doc.doctors"><a href='#'><span>{{doctor}}</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
try this
You have two problems:
Array definition
Instead of creating multiple doctor entities you should just create an array of them:
$scope.doctors=
[
{"patch":"BARIJPUR", "doctors":["RAMA SENA", "SMRITI IRANI","JAGDISH NAIR"]},
{"patch":"Anna", "doctors":["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"]},
{"patch":"Peter","doctors":["RATAN PANDEY", "RAMAN SHIVOLKAR"]}
];
ng-repeat
You used it in wrong place. It should be applied to <li> element - which basically you want to repeat, not to <a> or <span>:
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li ng-repeat="doc in doctors" class='has-sub'><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doc in doc.doctors"><a href='#'><span>{{doc}}</span></a></li>
</ul>
</li>
</ul>
Demo plnkr
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
yes this works for me! done! solved!
I'm new to AngularJS so please be kind to me.. :-P
So I'm looping twice with ng-repeat as in this example:
<ul>
<li ng-repeat="b in aMSG">
<p>{{b.name}}</p>
<ul>
<li ng-repeat="c in b.x"><a ng-click="getM($parent.$index,$index)" href="#">{{c.name}}</a></i>
</ul>
</li>
</ul>
See the fiddle: http://jsfiddle.net/trK98/
But when I apply a filter to search for text within the children:
<ul>
<li ng-repeat="b in aMSG">
<p>{{b.name}}</p>
<input type="text" ng-model="search" placeholder="Search for?">
<ul>
<li ng-repeat="c in b.x|filter:search"><a ng-click="getM($parent.$index,$index)" href="#">{{c.name}}</a></i>
</ul>
</li>
</ul>
The $index is lost as you can see here: http://jsfiddle.net/zb2kc/
(search for instance for juice then click on it you'll see $index = 0)
What am I doing wrong?
Thank you!
P.S: Sorry for my poor english.
Never use $index for any kind of logic. It can be used for managing CSS classes only. It's a highly volatile variable and will be changed after any change in source array (deletion, re-ordering), so $index is not bind to element of array, but only to position of some element in current view rendering.
Let's say you have the following code to display some products images:
<ul>
<li ng-repeat="p in products">
<img ng-src="/images/{{p.img}}"/>
</li>
</ul>
Now let's say some products unfortunately don't have images, you may fix that with:
<ul>
<li ng-repeat="p in products">
<img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/>
</li>
</ul>
Now go to the "network" tab of firebug or chrome developer tools and check for the images download -- you will see errors, because the browser still tried to download the non-existent image. It's hidden and the users won't notice, but of course it's bad: bad practice, bad for server performance, bad bad bad...
What is the correct "angular" solution for this?
An alternative to #Arun's solution is to use ng-switch or ng-if (available in v1.1.5), which add/remove DOM elements, unlike ng-hide/ng-show:
<ul>
<li ng-repeat="p in products">
<span ng-switch="p.img==undefined">
<img ng-switch-when="false" ng-src="/images/{{p.img}}"/>
</span>
</li>
</ul>
See #Rob's answer for an example using ng-if.
With version 1.1.5 you can use ng-if as #Abilash suggests:
<img ng-if="p.img" ng-src="/images/{{p.img}}"/>
You can do something like
<ul>
<li ng-repeat="p in products | imgsrc">
{{p.img}}
<img ng-src="/images/{{p.img}}"/>
</li>
</ul>
app.filter('imgsrc', function(){
return function(data){
var a = [];
angular.forEach(data, function(v, i){
if(v.img){
a.push(v);
}
});
return a;
}
});
Demo: Fiddle