javascript - AngularJS IF指令使用列

我有一个if指令（效果很好）。

当我单击NAME时，它会显示图像。

但我想在另一列中显示图像：

    <!-- COLUMN 1 -->
    <div class="col-md-4">
       <div ng-repeat="product in products">
          <h3><a style="cursor: pointer;" ng-click="products.chosen = product">name: {{product.name}}</a>   </h3>
          <!-- add image to colum 2 -->
          <img ng-if="products.chosen == product" ng-src="{{product.url_image}}"/>
       </div>
    </div>

<!-- IMAGES COLUMN 2-->
<div class="col-md-4">
   <!-- this doesn't work -->
   <img ng-if="products.chosen == product" ng-src="{{product.url_image}}"/>
</div>

这里是样机：

http://hpics.li/7678189

当我单击名称时，我有一张右下角出现的图片。
我想要在Column2中显示的图像。

谢谢你的帮助 ！

卡洛斯

最佳答案

function testController($scope)
{
  $scope.products = [{name: "prod 1", url_image: "http://ecx.images-amazon.com/images/I/514-t6qvDYL._SL150_.jpg"},{name: "prod 2", url_image: "http://ecx.images-amazon.com/images/I/41Bz5RkS3OL._SS120_RO10,1,201,225,243,255,255,255,15_.jpg"},{name: "prod 3", url_image: "http://ecx.images-amazon.com/images/I/41alFkSKj2L._SS120_RO10,1,201,225,243,255,255,255,15_.jpg"}];

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="" ng-controller="testController">
<!-- COLUMN 1 -->
    <div class="col-md-4">
       <div ng-repeat="product in products">
          <h3><a style="cursor: pointer;" ng-click="products.chosen = product">name: {{product.name}}</a>   </h3>
       </div>
    </div>

<!-- IMAGES COLUMN 2-->
<div class="col-md-4">
   <img ng-if="products.chosen" ng-src="{{products.chosen.url_image}}"/>
</div>
</div>