Question

我在div列表上使用ng-repeat，我手动在json中添加它呈现此div的项目。我需要定位我在json中添加的最后一个div，它会自动在屏幕上进行渲染，其中couse光标是，并且其余部分保持在相同的位置，但是没有给出渲染它的json中的位置。 / p>

我的方法是这样的

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

但是当我这样做时，所有的div都会得到这个位置，所以我需要使用$ last变量来添加或删除带有左侧和顶部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

有关这两种方法的示例，请参阅此 fiddle （使用颜色，因为jsfiddle中的位置更难）

选项1：ng-style和范围函数

ng-style将允许你这样做，为了保持整洁和可测试，你应该定义一个范围函数，如下面的（三角运算符是not currently supported的角度表达式，稳定的1.0.x版本的角度，{ {3}}）。

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元素上声明指令来实现。由于只为元素上的所有指令创建了一个新范围（假设至少有一个请求新范围），因此它可以访问although 1.1.5 has added ternary support。有关相关文档，请参阅：

ng-repeat scope values

scope - 如果设置为true，将为此指令创建新范围。如果同一元素上的多个指令请求新范围，则只创建一个新范围。

角度ng-repeat在条件上添加样式

2 个答案: