Develop Reference

How to have v-for loop nested in an other v-for loop in vuejs working?

I have a types variable that is an array of objects. Each object has 2 properties name and content.
The second property content is an array of object with only one property : name.
When displayed in the template with {{types}} I see this:
[ { "name": "Base", "content": [ { "name": "Base (Lager/Pilsner)" }, { "name": "Base (Pale)" }, { "name": "Base (Pale Ale)" }, { "name": "Base (Wheat)" }, { "name": "Base (Rye" }, { "name": "Base (Wheat)" } ] },
{ "name": "Kilned", "content": [ { "name": "Munich" }, { "name": "Vienna" }, { "name": "Aromatic" }, { "name": "Amber|Biscuit|Victory" }, { "name": "Brown Malt" } ] },
{ "name": "Stewed", "content": [ { "name": "Caramel|Crystal" }, { "name": "Dextrin" }, { "name": "Special Belge" }, { "name": "Honey Malt" } ] },
{ "name": "Roasted/Torrefied", "content": [ { "name": "Pale Chocolate" }, { "name": "Chocolate" }, { "name": "Black Wheat" }, { "name": "Roast Barley" }, null, { "name": "Roast Rye" }, { "name": "BLack Malt" } ] },
{ "name": "Others", "content": [ { "name": "Acidulated" } ] } ]
Here is my template
<div class="h-3/4 overflow-auto">
<div v-for="(group,index) in types">
<FermentableTypeItem
#updateModel="updateModel"
:key="index"
:type_name="group.name"
:group_name="group.name"
:state="group.state"
></FermentableTypeItem>
{{group.content}}
<FermentableTypeItem
v-for=" (t,index) in group.content"
#updateModel="updateModel"
:key="index"
:type_name="t.name"
:group_name="group.name"
></FermentableTypeItem>
</div>
</div>
As you can see I want to add a special [1] FermentableTypeItem for each first level element and then loop on this first level element 's content property to add a list of normal [2] FermentableTypeItem.
Note 1: special means that the group_name and the type_name are
identical
Note 2: normal means the the group_name and the type_name are
different
It works and display the various FermentableTypeItem s but only when I don't use the t variable in the second loop
If I use it, the app crashes saying the t is undefined.
Could somebody help me fixing this error ? May be it's obvious but I cannot see what is wrong.

There is null content object present. So remove null content from response your or check null v-if="t != null" like below.
<div v-for=" (t,index) in group.content" :index="index">
<FermentableTypeItem v-if="t != null"
#updateModel="updateModel"
:key="index"
:type_name="t.name"
:group_name="group.name"
></FermentableTypeItem>
</div>

How to populate selectbox in angularJS?

This my json data how to set a selected option of a dropdown list control using angular JS
$scope.alltoys=[
{
"dId": "570b886545034f0001718247",
"dName": "Toys",
"dSubName": "Comics",
"users": [
{
"name": "Superman",
"id": "570b9e3a45034f000171827b"
},
{
"name": "Batman",
"id": "570ba00045034f000171828a"
}]
},
{
"dId": "5767c68c52faff0001fb8555",
"dName": "Toys",
"dSubName": "General",
"users": [
{
"name": "Jack",
"id": "570b9e3a45034f000171827b"
},
{
"name": "Sparrow",
"id": "570ba00045034f000171828a"
}]
}
]
How to populate this select box using angular js
I want to populate like this
Toys-Comics
Batman
Superman
Toys-General
Jack
Sparrow
In here Toys-Comics & Toys-General are only title of that selected content
I want to sort users array when populate.
<div class="controls">
<select class="form-control" ng-model="toy"
ng-options="eachtoy as eachtoy.dName+' - '+eachtoy.dSubName group by eachtoy for eachtoy in alltoys">
<option value="">---------------Select---------------</option>
</select>
</div>
I tried this but its not working.

Couple of changes. First, make sure $scope.alltoys is a collection (array), like this:
$scope.alltoys = [{
"dId": "570b886545034f0001718247",
"dName": "Toys",
"dSubName": "Comics",
"users": [{
"name": "Superman",
"id": "570b9e3a45034f000171827b"
}, {
"name": "Batman",
"id": "570ba00045034f000171828a"
}]
}, {
"dId": "5767c68c52faff0001fb8555",
"dName": "Toys",
"dSubName": "General",
"users": [{
"name": "Jack",
"id": "570b9e3a45034f000171827b"
}, {
"name": "Sparrow",
"id": "570ba00045034f000171828a"
}]
}];
Then change your html to handle groups with optgroup, like this:
<select class="form-control" ng-model="toy">
<option value="">---------------Select---------------</option>
<optgroup ng-repeat="eachtoy in alltoys | orderBy: 'dName + dSubName" label="{{eachtoy.dName+' - '+eachtoy.dSubName}}">
<option ng-repeat="user in eachtoy.users | orderBy: 'name'">{{user.name}}</option>
</optgroup>
</select>
Here's a working plunk

angular child inside child

I have a problem with the recursion in angularJs.
I want to repeat all names from JSON file:
Here is my JSON file structure:
var data = {
"id": "580",
"name": "test",
"status": "ACTIVE",
"parentId": null,
"children": [
{
"id": "581",
"name": "test 2",
"status": "ACTIVE",
"parentId": "580",
"children": [{
"id": "594",
"name": "test 3",
"status": "ACTIVE",
"parentId": "581",
"children": []
}]
}
]
}
All I want is just to know how to make ng-repeat children in children?

You should use an ng-template in order to use it recursive.
<script type="text/ng-template" id="exampleTree">
{{ x.name }}
<ul ng-if="x.children">
<li ng-repeat="x in x.children" ng-include="'exampleTree'">
</li>
</ul>
</script>
To use this template and run it:
<ul>
<li ng-repeat="x in data" ng-include="'exampleTree'"></li>
</ul>
JSFiddle here

You can use ng-repeat with a template so it goes as far as you have data. Here is an example:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.child = {
"id": "580",
"name": "test",
"status": "ACTIVE",
"parentId": null,
"children": [{
"id": "581",
"name": "test 2",
"status": "ACTIVE",
"parentId": "580",
"children": [{
"id": "594",
"name": "test 3",
"status": "ACTIVE",
"parentId": "581",
"children": []
}]
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
<!-- This is the template that can be repeated in itself-->
<script type="text/ng-template" id="childView">
{{child.name}}
<ul>
<li ng-repeat="child in child.children" ng-include="'childView'"></li>
</ul>
</script>
<!-- This is the initial use for the template-->
<div ng-include="'childView'"></div>
</body>
I had to put child 594 in an array so it would work.

How to create a custom filter to search on nested arrays on Angular 1.3.6?

I have this array sports, json looks like:
[
{
"id": 26,
"name": "LIVE Betting",
"priority": 0,
"leagues": []
},
{
"id": 8,
"name": "NBA",
"priority": 3,
"leagues": [
{
"id": 5932,
"parent": 1000,
"name": "NBA",
"sport": {
"id": 8,
"name": "NBA"
},
"lineType": "G",
"priority": [
1,
3
],
"part": "0"
}
]
},
{
"id": 24,
"name": "College Basketball",
"priority": 4,
"leagues": [
{
"id": 2599,
"parent": 1000,
"name": "NCAA BASKETBALL",
"sport": {
"id": 24,
"name": "College Basketball"
},
"lineType": "G",
"priority": [
0,
4
],
"part": "0"
},
{
"id": 2631,
"parent": 1000,
"name": "NCAA BASKETBALL ADDED GAMES",
"sport": {
"id": 24,
"name": "College Basketball"
},
"lineType": "G",
"priority": [
1,
4
],
"part": "0"
},
...
within that array you can see other array named "leagues": [{...}] which contains an Object, my filter is searching fine through the top array which is sports but once I try to find through the "name" within leagues array then my app shows up a message that the filter is empty.
I just realized that this is happening because I am using the version 1.3.6 of Angular but I am unable to change it until the Ionic people upgrade it to the 1.3.8, I made this Plnkr with the version 1.3.8 and it works properly, but if you change the version on that same Plnkr to the 1.3.6 automatically stop searching through leagues.name and only works with sport.name, and here is a Plnkr with the version 1.3.6, on both Plnkrs try searching Greece, in the first with the version 1.3.8 works, but in the version 1.3.6 just the message no sports to show comes up
<input type="search" ng-model="query">
<div ng-repeat="sport in sportsFilter = (sports | filter:query)">
<!--this array works fine-->
<strong>{{sport.name}}</strong>
</div>
<div ng-repeat="league in sport.leagues">
<!--this one not works at all-->
{{league.name}}
</div>
</div>
I've been trying all the ways already, with a resolve, with different models, etc and actually I just realized that I need a custom filter so I would like you to give me a hand because I do not where to start from with it.
or is there any easier way ?

<div ng-app="myApp">
<div ng-controller="TestController">
<input type="search" placeholder="Search" ng-model="query">
<div role="alert" ng-show="sportfilter.length==0">No sports to show</div>
<div ng-repeat="sport in sportfilter=(sports | filter:matchNameDeep(query))" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<div class="item item-button-right" ng-repeat="league in sport.leagues" on-tap="goToLines(league)">
{{league.name}}
</div>
</div>
</div>
</div>
$scope.matchNameDeep = function(query) {
return function(sport) {
return !query || sport.name.match(new RegExp(query, "ig")) || sport.leagues.some(function(element, index, array) {
return element.name.match(new RegExp(query, "ig"))
});
}
};
see here it working with angular 1.3.6 http://plnkr.co/edit/0w9PYbDsOz0mHBdVldZt?p=preview

You can use https://github.com/marklagendijk/lodash-deep for this type of thing.

AngularJS rendering takes a lot of time

I've got a model that's like this:
{
"items": [
{
"type": "A",
"id": "2",
"number": 0,
"info": "info1",
"childs": [
{
"type": "B",
"id": "21",
"number": 0,
"info": "info1",
"childs": []
}
]
},
{
"type": "A",
"id": "1",
"number": 0,
"info": "info1",
"childs": []
},
{
"type": "A",
"id": "2",
"number": 0,
"childs": [
{
"type": "B",
"id": "21",
"number": 0,
"info": "info1",
"childs": [
{
"type": "C",
"id": "211",
"number": 0,
"info": "info1",
"childs": [
{
"type": "B",
"id": "2111",
"info": "info1",
"number": 0
}
]
}
]
}
]
}
]
}
that is rendered in the page via 4 nested ng-repeat. The property number is changed via an input="number", one for each row. The info value is changed by a selectbox
The structure is like this.
<div ng-repeat="item in items">
<input type="number" ng-model="item.number" />
<select ng-model="item.info">
</select>
<div ng-repeat="child in items.child">
<input type="number" ng-model="child.number" />
<select ng-model="child.info">
</select>
<div ng-repeat="child2 in child.child">
<input type="number" ng-model="child2.number" />
<select ng-model="child2.info">
</select>
<div ng-repeat="child3 in child2.child">
<input type="number" ng-model="child3.number" />
<select ng-model="child3.info">
</select>
</div>
</div>
</div>
</div>
Well that's not exactly how's the actual webapp but it's enough for you. Anyway, if I change the value of an input="number", the rendering process takes like 1500ms to complete. The same (but the rendering is a little bit faster) happens when I change the selectbox selected option.
When I change the value I just need to update the property of the item in the model. Why does angular render all over again?
What can I do?
Keep in mind that usually the model contains around 10/15 items with 5 to 20 child each.
PS: Weird thing, when I change the input value clicking on the spinners (the default ones that appear when I use Chrome), the number is incremented or decremented by 2, and not 1.
EDIT: Still haven't solved this problem. When I have too many items to display in the screen, all the rendering process is too slow with four nested ng-repeat. Anyone has an alternative solution for display my model in the page and modify the values without losing 2s on rendering? I can't use pagination or infinite scrolling.