從嵌套的html元素訪問當前的ng-repeat元素
[英]access current ng-repeat element from nested html element
問題描述
我是Angle的新手，目前正在嘗試完成“ ng-book”教科書。
我正在使用ng-repeat過濾匹配搜索條件的人員列表。 我有我想要的過濾器。 我很難從ng-repeat控制的html元素中嵌套的html元素訪問當前的ng-repeat元素。
例如，運行代碼段並搜索“ pizza”。 它列出了3個喜歡披薩的人。 但是對於每個人，我想將他們的其余屬性打印在嵌套的<dd>元素中。 但是我似乎無法訪問那里的ng-repeat元素，什么也沒有顯示。 我也希望重復此元素並與每個<dt>元素相對應。
我對執行此操作的“角度”方式更感興趣。 謝謝閱讀！
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 個解決方案
解決方案1
0 已采納 2017-05-27 21:11:27
角度似乎沒什么問題，只是DD不能嵌套DT，請參見示例如何使用它： w3schools 。 使用您的代碼，我想應該是這樣的：
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>
如何從與ng-repeat相同的元素上的另一個指令訪問ng-repeat的作用域？
[英]How do I access ng-repeat's scope from another directive on the same element that ng-repeat is on?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.