фильтр с кликом

Question

фильтр с кликом

0

Есть ли способ фильтровать на основе щелчка изображения и отображать только информацию для этого человека? В основном сначала печатается информация каждого в семье, но когда я нажимаю изображение конкретного участника, я хочу, чтобы информация о нем отображалась только.

Banks.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; }

когда я нажимаю изображение, которое загрузит новое изображение, но я не уверен, как фильтровать на основе щелкнутого изображения.

user2421339 25 окт. 2013, в 01:26

Источник

Теги:

html

1 ответ

Ещё вопросы

angularijustmether · Accepted Answer · 2013-10-24T20-02-00.000Z

Да. Вы хотите создать контроллер, затем загрузите данные 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