Question

我正在为一个网站制作一个“会员”页面，每个网站都有3列图片和名称。我希望能够点击图片以获得有关该成员的更多信息（通过Foundation的模态）。我正在使用转发器来显示图片，但我仍然坚持如何将成员数据传递到模态中，这样当我点击人A时，模态将有人A的数据。

这是我到目前为止所做的：

我将成员存储为members.json中的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>

Answer 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

使用angularjs转发器将数据传递到基础模态

1 个答案: