0

我正在为一个网站制作一个“会员”页面，该页面有 3 列图片和每个会员的姓名。我希望能够单击图片以获取有关该成员的更多信息（通过 Foundation 的模式）。我正在使用中继器来显示图片，但我一直在思考如何将成员数据传递到模态中，这样当我单击人员 A 时，模态将具有人员 A 的数据。

这是我到目前为止所拥有的：

我将成员作为 json 列表存储在members.json：

{
    "current" :  [
    {
        "name": "Bob",
        "pic": "http://www.placehold.it/300x300",
        "id": "blah",
        "position": "position 1",
        "bio": "Hi I am Bob"
    },

    {
        "name": "Bobby",
        "pic": "http://www.placehold.it/300x300",
        "id": "blah",
        "position": "position 2",
        "bio": "Hi I am Bobby"
    }
    ]
}

这是我的控制器，使用 json 文件：

var app = angular.module('app').controller('memberCtrl', ['$scope', '$http', function ($scope, $http) {
    'use strict';

    $http.get('/data/members.json').success(function(data) {
        $scope.members = data;
        $scope.numColumns = 3;
        $scope.current_rows = [];
        $scope.current_rows.length = Math.ceil($scope.members.current.length / $scope.numColumns);
        $scope.current_cols = [];
        $scope.current_cols.length = $scope.numColumns;      
    });
}]);

这是我的html：

<!-- My attempt at the modal -->
<div ng-controller="memberCtrl" id="myModal" class="reveal-modal">
  <div class="row">
    <div class="large-3 columns">
      <img src="http://www.placehold.it/300x300">
    </div>
    <div class="large-6 columns">
      <center>
    <!-- The following remains blank -->
    <h2>{{members.current[$parent.$index * numColumns + $index].name}}</h2>
      </center>
      <p class="lead">Bio.</p>
      <p>Hi</p>
    </div>
    <div class="large-3 columns">
      <img src="http://www.placehold.it/300x300">
    </div>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>


<!-- This creates a 3 column array of member profiles (it works) -->
<div ng-controller="memberCtrl">
  <div class="row" data-ng-repeat="row in current_rows">
    <div class="large-4 columns" data-ng-repeat="col in current_cols">
      <a href="#" data-reveal-id="myModal"><img ng-src="{{members.current[$parent.$index * numColumns + $index].pic}}"></a>      
      <center>
    <small><h3>{{members.current[$parent.$index * numColumns + $index].name}}</h3></small>
    <small><h4>{{members.current[$parent.$index * numColumns + $index].position}}</h4></small>
      </center>          
    </div>
  </div>   
</div>
4

1 回答 1

1

在img中添加ng-click attr：

<img ng-src="{{members.current[$parent.$index * numColumns + $index].pic}}" 
     ng-click="loadMember(members.current[$parent.$index * numColumns + $index]);"/>

并在控制器中添加功能：

$scope.loadMember = function (member) {
    //you should be able to access the current member
    console.log(member);
}

Demo on jsFiddle

于 2013-07-31T03:31:18.607 回答