在另一个 div 的 ng-repeat 中查看所选照片

Question

我有一个 table 在 ng-repeat 中有数据。一列包含照片。当我编辑 table 中的特定数据时，应显示我已选择的数据的照片。我怎么可能做到？

在我的 table 中，代码是这样的

<td>
    <img ng-src='{{ item.photo }}' height='50px'>
</td>

在我的另一个 div 中是这样的

<img ng-src='pphoto' style="float:right;width:200px;height:100px;" alt="img"/>

Answer 1

您可以通过 ng-click 上的函数传递元素并将其绑定到变量。演示

 var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.options = [{
       'title': 'Title1',
       'label': 'Zip code',
       'type': 'xxx',
       'photo': 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300'
     },
     {
       'title': 'Title2',
       'label': 'Zip code2',
       'type': 'yyyy',
       'photo': 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSSYBkITzCk_4rBfHIkRTwSLf_VJ5OqmPCrLZV7mZZ2s8RzZJgf5RFhzJ0'
     }

    ];

     $scope.pphoto;

     $scope.assign = function(item) {

       $scope.pphoto = item.photo;
     }
   }
 ]);

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
    <div>
      <table>
        <td ng-repeat="item in options">
          <img ng-src='{{item.photo}}' height='50px'>
          <button ng-click="assign(item)">EDIT</button>
        </td>
      </table>
      <div>Q
        <img ng-src='{{pphoto}}' alt="img" />
      </div>
</body>
</html>

在另一个 div 的 ng-repeat 中查看所选照片

View selected photo inside a ng-repeat in another div

html

angularjs

angularjs-ng-repeat

angular-ngmodel