access current ng-repeat element from nested html element
Question
I'm new to angular currently trying to complete the 'ng-book' textbook.
I am using ng-repeat to filter a list of people that match the search criteria. I have the filter working as I desire. I'm having difficulty accessing the current ng-repeat element from an html element that is nested in the html element that ng-repeat controls.
For example run the snippet and search for 'pizza'. It lists the 3 people who like pizza. But for each person, I want to print the rest of their attributes in a nested <dd> element. But I looks as if I don't have access to the ng-repeat element there, as nothing displays. I would also like this element to be repeated and correspond to each <dt> element.
I am more interested in what the 'angular' way of doing this is. Thanks for reading!
var app = angular.module("myApp", []); app.controller("SearchController", function($scope) { $scope.search = {}; $scope.search.people = [{ name: 'Stephen', food: ['pizza', 'ice cream'], hobbies: ['programming', 'hiking', 'traveling'], location: 'austin' }, { name: 'Sara', food: ['cheese', 'bacon', 'cupcakes'], hobbies: ['hiking', 'swimming', 'bars'], location: 'san antonio' }, { name: 'jaqueline', food: ['pizza', 'hot cheetos', 'pasta', 'tacos'], hobbies: ['softball', 'dance', 'music', 'vinyls', 'makeup'], location: 'san francisco' }, { name: 'Jake', food: ['burgers', 'bbq', 'chinese'], hobbies: ['running', 'bars', 'traveling'], location: 'washingtion dc' }, { name: 'Chris', food: ['chinese', 'sandwiches', 'burgers'], hobbies: ['programming', 'traveling', 'hacking'], location: 'maryland' }, { name: 'Lisa', food: ['donuts', 'sandwiches', 'bbq', 'pizza'], hobbies: ['working out', 'running', 'traveling', 'dancing'], location: 'new jersey' } ]; });
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"> </script> </head> <body> <div ng-controller="SearchController"> <input ng-model="search.query" type="text"> <dl> <dt ng-repeat="person in search.people | filter:search.query"> {{ person.name }} <dd> - likes {{ person.food }}, {{ person.hobbies }} <br> -lives in {{ person.location }} </dd> </dt> </dl> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2017-05-27 21:11:27
It seems that there's nothing wrong with your angular, it's just that DD can't have nested DT, see examples how it should be used: w3schools . With your code, I guess it should be something like that:
var app = angular.module("myApp", []); app.controller("SearchController", function($scope) { $scope.search = {}; $scope.search.people = [{ name: 'Stephen', food: ['pizza', 'ice cream'], hobbies: ['programming', 'hiking', 'traveling'], location: 'austin' }, { name: 'Sara', food: ['cheese', 'bacon', 'cupcakes'], hobbies: ['hiking', 'swimming', 'bars'], location: 'san antonio' }, { name: 'jaqueline', food: ['pizza', 'hot cheetos', 'pasta', 'tacos'], hobbies: ['softball', 'dance', 'music', 'vinyls', 'makeup'], location: 'san francisco' }, { name: 'Jake', food: ['burgers', 'bbq', 'chinese'], hobbies: ['running', 'bars', 'traveling'], location: 'washingtion dc' }, { name: 'Chris', food: ['chinese', 'sandwiches', 'burgers'], hobbies: ['programming', 'traveling', 'hacking'], location: 'maryland' }, { name: 'Lisa', food: ['donuts', 'sandwiches', 'bbq', 'pizza'], hobbies: ['working out', 'running', 'traveling', 'dancing'], location: 'new jersey' } ]; });
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"> </script> </head> <body> <div ng-controller="SearchController"> <input ng-model="search.query" type="text"> <dl> <div ng-repeat="person in search.people | filter:search.query"> {{ person.name }} <dt>likes</dt> <dd>{{ person.food }}, {{ person.hobbies }}</dd> <br> <dt>lives in</dt> <dd>{{ person.location }}</dd> </div> </dl> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.