AngularJS IF Directive使用列

我有一個if指令（它工作正常）。AngularJS IF Directive使用列

當我點擊名稱時，它顯示圖片。

但我想在其他行的影像：

<!-- 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中顯示圖像。

感謝您的幫助！

卡洛斯

來源

2014-10-06 Carlos

嘿卡洛斯，可以ü把你如何指望它的一些屏幕截圖？ – Kailas 2014-10-06 12:20:01

你想在第2列中選擇所有圖像？ – dfsq 2014-10-06 12:25:26

是的，在第2欄中選擇的圖像。只是添加了模型。謝謝！ – Carlos 2014-10-06 12:27:35

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>

來源

2014-10-06 12:28:45 pln

完美！非常感謝！ – Carlos 2014-10-06 12:34:36

AngularJS IF Directive使用列

回答

相關問題