How can I populate array using ng-repeat in Angular JS

Question

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

Answer 1

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>

Answer 2

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/

Answer 3

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'">