Question

我刚开始尝试完成'ng-book'教科书。

我正在使用ng-repeat来过滤符合搜索条件的人员列表。我有过滤器正常工作。我无法从嵌入在ng-repeat控件的html元素中的html元素访问当前的ng-repeat元素。

例如，运行代码段并搜索“披萨”。它列出了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 d.c.'
    },
    {
      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>

Answer 1

似乎你的角度没有任何问题，只是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 d.c.'
    },
    {
      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>

从嵌套的html元素访问当前的ng-repeat元素

1 个答案: