角ng-repeat添加樣式的條件

我在一個div列表上使用ng-repeat，我手動在json中添加項目來渲染這個div。我需要定位我在json中添加的最後一個div，它會自動在屏幕上重新顯示，其中的鼠標光標位於其中，其餘部分保持在相同的位置，但不顯示正在渲染它的json中的位置。角ng-repeat添加樣式的條件

我對這個問題的方法是這樣的

<div ng-repeat="contact in jsonContacts" style="left: {{lastX}}px; top: {{lastY}}px;"></div>

但是當我做到這一點，所有的div得到這個位置，所以我需要使用$最後一個變量作條件來添加或刪除樣式標籤與那些左和頂部的CSS。

先謝謝你了，丹尼爾！

來源

2013-08-31 Pacuraru Daniel

對於這兩種方法的例子參見本fiddle（使用顏色的位置是在困難jsfiddle）

選項1：ng樣式和範圍函數

NG-風格將讓你這樣做，並保持它整潔和可測試的，你應該定義範圍的功能，如下面（三元運營商not currently supported爲角，although 1.1.5 has added ternary support穩定1.0.x的版本角表達式）。

ng-style='myStyleFunction($last)'

在控制器中，定義：

$scope.myStyleFunction = function($last) { 
    return { 
    'left': $last ? $scope.lastX + 'px' : '', 
    'top': $last ? $scope.lastY + 'px' : '' 
    }; 
}

選項2：自定義指令

或者，你能想到的，甚至更多的「角」，並定義一個指令：

dirModule.directive('positionLast', function() { 
    return { 
     scope: true, 
     link: function (scope, $element, attrs) { 
      if (scope.$last) { 
       // if jQuery is present use this, else adjust as appropriate 
       $element.css("left", $scope.lastX + 'px'); 
       $element.css("top", $scope.lastY + 'px'); 
      } 
     } 
    } 
});

然後：

<div ng-repeat="contact in jsonContacts" position-last> ...

編輯這是通過使用scope: true和聲明ng-repeat元素的指令。由於對元素上的所有指令只創建一個新範圍（假設至少有一個新範圍請求新範圍），則它可以訪問ng-repeat scope values。對於相關文件見：

Directives: Directive Definition Object (scope/true)

範圍 - 如果設置爲true的新範圍爲這個指令將被創建。如果同一元素上的多個指令請求新範圍，則只創建一個新範圍。

來源

2013-08-31 19:22:00

每當我問一些問題時，我知道Angular比我以前想要的更強大和更復雜：D非常感謝你，我也會試着去看看指令裏面的範圍如何從ng-重複:) –

根據你的HTML，你應該試試這個

<div ng-repeat='contact in jsonContacts' ng-style='{"left":($last?lastX:null)+"px","top":($last?lastY:null)+"px"}'>{{item}}</div>

這裏被確認的小提琴http://jsfiddle.net/cmyworld/yFc6J/1/

來源

2013-08-31 18:25:48 Chandermani

我以爲你[不能在表達式中使用條件邏輯]（http：//docs-angularjs-org-dev.appspot。com/guide/expression），所以這不起作用？ –

@AndyBrown它實際上，1.5.1中的ateast看到我更新的小提琴。 – Chandermani

你是對的，我沒有評論空間來談論版本。查看我的答案獲取信息。我確實假設使用當前穩定的1.0.x分支來解決SO問題，除非OP另有說明。 –

角ng-repeat添加樣式的條件

回答

相關問題