0

有没有办法根据点击的图像进行过滤，只显示那个人的信息？基本上一开始会打印家庭中每个人的信息，但是当我单击特定成员的图像时，我只希望显示该人的信息。

银行.json

{

"id": "banks", 
"images": [
    "img/phones/Banks/father.jpg",
    "img/phones/Banks/mother.gif",
    "img/phones/Banks/daughter.gif",
    "img/phones/Banks/son.png"
],

"famname": "Banks",
"town": "Albany",
"income": 360000,
"kids": 2,
"fathername":"Homer!",
"mothername":"Marge",
"daughtername" : "Lisa",
"sonname" : "Bart",

"father": [
           "Likes Donuts.",
           "Choking Bart.",
           "Wooo-hoo!"
           ],
"mother": [
           "Hates Homer.",
           "Has Blue hair.",
           "Loves the smurfs."
           ],
"son": [
        "Skateboarding.",
        "Being Bartmannn!"
],
"daughter": [
        "Reading...",
        "Saxophone...",
        "Nothing interesting about her sadly..."
]}

.html 文件

<img ng-src="{{mainImageUrl}}" class="phone">

<h1>{{phone.famname}} Family</h1>

 <h3><p>Town: {{phone.town}} </br> Income: ${{phone.income}} </br> Kids: {{phone.kids}}</p></h3>

<ul class="phone-thumbs">
<li ng-repeat="img in phone.images | filter:query">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>

<ul class="specs">
<li>
  <h2><span>Father: {{phone.fathername}}</span></h2>
<dl>
  <dt></dt>
 <h3> <dd ng-repeat="father in phone.father">{{father}}</dd></h3>
</dl>
</li>
<li>
  <h2><span>Mother: {{phone.mothername}}</span></h2>
  <dl>
      <dt></dt>
      <h3> <dd ng-repeat="mother in phone.mother">{{mother}}</dd></h3>
  </dl>
</li>
<li>
  <h2><span>Daughter: {{phone.daughtername}}</span></h2>
  <dl>
      <dt></dt>
      <h3> <dd ng-repeat="daughter in phone.daughter">{{daughter}}</dd></h3>
  </dl>
</li>
<li>
  <h2><span>Son: {{phone.sonname}}</span></h2>
  <dl>
      <dt></dt>
      <h3> <dd ng-repeat="son in phone.son">{{son}}</dd></h3>
  </dl>
</li>
</ul>

功能

$scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; }

当我单击图像时，将加载新图像，但我不确定如何根据单击的图像进行过滤。

4

1 回答 1

0

是的。您需要制作一个控制器，然后将 Banks.json 数据加载到控制器中的数据结构中，然后向控制器添加一个函数，该函数将根据上次单击的图片切换显示的数据。例子：

// controller
function FamilyController($scope) {
  $scope.memberData = [
      {name: "homer", traits: ["eats","sleeps"], img:"img/phones/Banks/father.jpg"},
      {name: "homer", traits: ["eats","sleeps"], img:"img/phones/Banks/father.jpg"},
      {name: "homer", traits: ["eats","sleeps"], img:"img/phones/Banks/father.jpg"},
      {name: "homer", traits: ["eats","sleeps"], img:"img/phones/Banks/father.jpg"}
    ];
  $scope.member = $scope.memberData[0];
  $scope.setMember = function(member) {
    $scope.member = member;
  }
}

// HTML
/*
<div ng-controller="FamilyController">
  <ul class="phone-thumbs">
    <li ng-repeat="member in memberData | filter:query">
      <img ng-src="{{member.img}}" ng-click="setMember(member)">
    </li>
  </ul>

  Name: {{member.name}}<br/>
  <!-- then can access whatever other data you want using {{member.WHATEVER}}, like the traits -->
</div>
*/

如果您愿意，我可以现场指导您 - https://www.sudonow.com/session/5269a087ea4032693f000078

于 2013-10-24T22:34:35.873 回答