How to display children of a specific parent on change of dropdown from a json in angularjs

Question

Here I have a dropdown and and mock json contains array of objectr and also children as array.Here when I change the dropdown,specific children/sublink should be display on p tag, by onchange of specific project name.for Ex- if I select Project1 then sublink(Project1a", "Project1b"..) should display in p tag again on change of Project2 sublink(Project2a", "Project2b"..) should display/overwrite again. I tried but I didn't get the proper result.Can anyone please help me,below is my code.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="popData" ng-change="chanData()">
  <option ng-repeat="x in records">{{x.project_name}}</option>
  </select>

  <p>{{records.sublink}}</p>
</div>

script

var BaseApp = angular.module('myApp', ['ngResource']);

BaseApp.run(function($rootScope) {

})

BaseApp.controller("myCtrl", function($scope) {

  $scope.records = [{
        "project_id": "1001",
        "project_name": "Project1",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager1",
        "duration": "3 Years",
        "team_size": "10",
        "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
    },
    {
        "project_id": "1002",
        "project_name": "Project2",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager2",
        "duration": "5 Years",
        "team_size": "12",
        "sublink": ["Project2a", "Project2b", "Project2c", "Project2d", "Project2e"]
    },
    {
        "project_id": "1003",
        "project_name": "Project3",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager3",
        "duration": "4 Years",
        "team_size": "1",
        "sublink": ["Project3a", "Project3b", "Project3c", "Project3d", "Project3e"]
    },
    {
        "project_id": "1004",
        "project_name": "Project4",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager4",
        "duration": "6 Years",
        "team_size": "30",
        "sublink": ["Project4a", "Project4b", "Project4c", "Project4d", "Project4e"]
    },
    {
        "project_id": "1005",
        "project_name": "Project5",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager5",
        "duration": "5 Years",
        "team_size": "23",
        "sublink": ["Project5a", "Project5b", "Project5c", "Project5d", "Project5e"]
    },
    {
        "project_id": "1006",
        "project_name": "Project6",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager6",
        "duration": "3 Years",
        "team_size": "12",
        "sublink": ["Project6a", "Project6b", "Project6c", "Project6d", "Project6e"]
    },
    {
        "project_id": "1007",
        "project_name": "Project7",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager7",
        "duration": "3 Years",
        "team_size": "65",
        "sublink": ["Project7a", "Project7b", "Project7c", "Project7d", "Project7e"]
    },
    {
        "project_id": "1008",
        "project_name": "Project8",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager8",
        "duration": "7 Years",
        "team_size": "25",
        "sublink": ["Project8a", "Project8b", "Project8c", "Project8d", "Project8e"]
    }
]
$scope.chanData = function() {
        console.log($scope.records.sublink);
    };

});

you mean if you selected 'Project1' in the dropdown? the sublink should display on p tag? — justinmontalban, Apr 01 '19 at 02:32
Here is a similar SO question that should help you [angularjs-ng-model-in-a-select](https://stackoverflow.com/questions/30048605/angularjs-ng-model-in-a-select) — roshan, Apr 01 '19 at 03:45

score 0 · Accepted Answer · answered Apr 01 '19 at 03:30

Instead on putting the ng-repeat in options tag, use ng-options to display data.

Try this.

var BaseApp = angular.module('myApp', ['ngResource']);

BaseApp.run(function($rootScope) {

})

BaseApp.controller("myCtrl", function($scope) {

  $scope.records = [{
        "project_id": "1001",
        "project_name": "Project1",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager1",
        "duration": "3 Years",
        "team_size": "10",
        "sublink": ["Project1a", "Project1b", "Project1c", "Project1d", "Project1e"]
    },
    {
        "project_id": "1002",
        "project_name": "Project2",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager2",
        "duration": "5 Years",
        "team_size": "12",
        "sublink": ["Project2a", "Project2b", "Project2c", "Project2d", "Project2e"]
    },
    {
        "project_id": "1003",
        "project_name": "Project3",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager3",
        "duration": "4 Years",
        "team_size": "1",
        "sublink": ["Project3a", "Project3b", "Project3c", "Project3d", "Project3e"]
    },
    {
        "project_id": "1004",
        "project_name": "Project4",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager4",
        "duration": "6 Years",
        "team_size": "30",
        "sublink": ["Project4a", "Project4b", "Project4c", "Project4d", "Project4e"]
    },
    {
        "project_id": "1005",
        "project_name": "Project5",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager5",
        "duration": "5 Years",
        "team_size": "23",
        "sublink": ["Project5a", "Project5b", "Project5c", "Project5d", "Project5e"]
    },
    {
        "project_id": "1006",
        "project_name": "Project6",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager6",
        "duration": "3 Years",
        "team_size": "12",
        "sublink": ["Project6a", "Project6b", "Project6c", "Project6d", "Project6e"]
    },
    {
        "project_id": "1007",
        "project_name": "Project7",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager7",
        "duration": "3 Years",
        "team_size": "65",
        "sublink": ["Project7a", "Project7b", "Project7c", "Project7d", "Project7e"]
    },
    {
        "project_id": "1008",
        "project_name": "Project8",
        "project_desc": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
        "project_manager": "Manager8",
        "duration": "7 Years",
        "team_size": "25",
        "sublink": ["Project8a", "Project8b", "Project8c", "Project8d", "Project8e"]
    }];
    

$scope.chanData = function() {

        //console.log($scope.popData);
    };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.0.5/angular-resource.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="x as x.project_name for x in records"  ng-change="chanData()" ng-model="popData" >
  <option value="">Select Account</option>
  </select>

  <p>{{popData.sublink}}</p>
  
</div>

How to display children of a specific parent on change of dropdown from a json in angularjs

HTML

script

1 Answers1