Reputation: 966
How can an array of objects be populated with data using ng-repeat
for particular id in AngularJS version 1.4
{
"tagTypeDetails": [
{
"id": 3,
"type": "Project Type",
"Tags": [
{"id": 21, "name": "Residential"},
{"id": 22, "name": "Office"},
{"id": 23, "name": "Retail"},
{"id": 24, "name": "Hospitality"}
]
},
{
"id": 6,
"type": "Styles",
"Tags": [
{"id": 47, "name": "Scandinavian"},
{"id": 48, "name": "Industrial"},
{"id": 49, "name": "Contemporary"},
{"id": 50, "name": "Minimalistic"},
{"id": 51, "name": "Modern"},
{"id": 52, "name": "Eclectic"}
]
},
{
"id": 9,
"type": "Area",
"Tags": [
{"id": 68, "name": "500-1000 sqft"}
]
},
{
"id": 30,
"type": "Project Budget",
"Tags": [
{"id": 112 ...}
],
...
}
]
}
This is the data from this in html view I want to display all the 'Tags' name for particular label field on the basis of particular specific id
I am getting Tags name from all the id's
Example :
<label for="type" class="col-sm-2">Project type</label>
<div class="col-sm-8" ng-repeat="tags in addProjectVm.tagsData">
<label ng-repeat="tag in tags.Tags">
//here all Tags name are getting displayed.. //i want specific for type="Project Type" only
<input type="checkbox" name="project" id="{{tag.id}}" value="{{tag.name}}"> {{tag.name}}
</label>
</div>
It would be really appreciated with best possible solutions.. as I have the alternative solution but that is not the best practice to do
Upvotes: 2
Views: 741
Reputation: 966
I did it like this..
vm.projectTag = {
types: vm.getTags('Project Type'),
styles: vm.getTags('Styles'),
budgets: vm.getTags('Project Budget (S$)'),
areas: vm.getTags('Area')
};
vm.getTags = function (tagName) {
for (var i = 0; i < vm.tagsData.length; i++) {
if (tagName == vm.tagsData[i].type) {
return vm.tagsData[i].Tags;
}
}
return [];
};
<label for="type" class="col-sm-2 control-label x-medium" id="label0">Project Type</label>
<div class="clearfix-height15"></div>
<div class="btn-group col-sm-8" data-toggle="buttons">
<label class="btn btn-default btn-tag" ng-class="{active: tag.checked}" ng-repeat="tag in addProjectVm.projectTag.types"
ng-click="addProjectVm.selectedTags.projectType = tag.id">
<input type="radio" id="projectType" name="projectType" ng-model="tag.checked"> {{tag.name}}
</label>
</div>
Upvotes: 0
Reputation: 241
If I understand your question correctly you can use a filter. https://docs.angularjs.org/api/ng/filter/filter
<div class="col-sm-8" ng-repeat="tags in addProjectVm.tagsData | filter:{type:'Project Type'}">
Here's a fiddle: http://jsfiddle.net/4o7dwyu6/
Upvotes: 1
Reputation: 5131
I do not see here any need to populate something, just display the tag you want with ng-if
:
<label ng-repeat="tag in tags.Tags" ng-if="tag.type === 'Project Type'">
Upvotes: 0