角度ng-repeat在條件上添加樣式

Question

我在div列表上使用ng-repeat，我手動在json中添加它渲染此div的項目。 我需要定位我在json中添加的最后一個div，它會自動在屏幕上進行渲染，其中couse光標是，並且其余部分保持在相同的位置，但是沒有給出渲染它的json中的位置。

我對此的處理是這樣的

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

但是當我這樣做時，所有的div都得到這個位置，所以我需要使用$ last變量來添加或刪除帶有left和top css的樣式標記。

謝謝你，丹尼爾！

Answer 1

根據你的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/

Answer 2

看看這個小提琴的兩種方法的例子（使用顏色，因為位置在jsfiddle中更難）

選項1：ng-style和范圍功能

ng-style將允許你這樣做，並保持它整潔和可測試你應該定義一個范圍函數，如下面（角度表達式當前不支持三元運算符穩定1.0.x版本的角度， 雖然增加了1.1.5三元支持 ）。

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范圍值 。 有關文件，請參閱：

• 指令：指令定義對象（范圍/ true）

scope - 如果設置為true，將為此指令創建新范圍。 如果同一元素上的多個指令請求新范圍，則只創建一個新范圍。