javascript - How to output selected object properthy name to paragraph in angularJs -


i have 3 variables in maincontroller, 1 select person, 1 genre associated selected person name, , array of objects data. bind data in select element enviroment, goal output selected items in paragraph further manipulation, managed output selected person appears in vertical aligment. can show me how output example in case let's this, select chris , in paragraph want "genre chris listen indie, drumstep, dubstep , electro"

myapp.controller('maincontroller', function($scope){   $scope.selectedperson = 0;   $scope.selectedgenre = null;   $scope.people = [     { id: 0, name: 'leon', music: [ 'rock', 'metal', 'dubstep', 'electro' ] },     { id: 1, name: 'chris', music: [ 'indie', 'drumstep', 'dubstep', 'electro' ] },     { id: 2, name: 'harry', music: [ 'rock', 'metal', 'thrash metal', 'heavy metal' ] },     { id: 3, name: 'allyce', music: [ 'pop', 'rnb', 'hip hop' ] }   ]; });

html template

<!doctype html> <head>     <title>learning angularjs</title>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>     <script type="text/javascript" src='app.js'></script>     <script type="text/javascript" src='maincontroller.js'></script> </head> <body>     <div id='content' ng-app='myang' ng-controller='maincontroller'>         <select ng-model='selectedperson' ng-options='list.name list in people'></select>         <select ng-model='selectedgenre'>             <option ng-repeat='genre in people[selectedperson.id].music'>{{genre}}</option>         </select>         <p ng-model='people' ng-repeat='person in people[selectedperson.id].name'>{{person}}</p>     </div>  </body> </html>

i managed output selected person appears in vertical aligment.

you run ng-repeat directive on single string. reason why like:

c  h  r   s

maybe like:

<p>genre {{people[selectedperson.id].name}} listen  {{people[selectedperson.id].music.join(', ')}}<p>

demo

      <select ng-model='selectedperson' ng-options='list list.name  list in people'>         <option value="">-- select person --</option>       </select>           <select ng-model='selectedgenre'>             <option ng-repeat='genre in people[selectedperson.id].music'>{{genre}}</option>         </select>           <p>genre {{people[selectedperson.id].name}} listen  {{people[selectedperson.id].music.join(', ')}}<p>

Comments

Post a Comment