3

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

我对此的方法是这样的

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

但是当我这样做时，所有的 div 都会得到这个位置，所以我需要使用 $last 变量来添加或删除左侧和顶部 css 的样式标签。

提前谢谢你，丹尼尔！

4

2 回答 2

5

根据你的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-31T18:25:48.153 回答
4

有关这两种方法的示例，请参见this fiddle（在 jsfiddle 中使用颜色作为位置更难）

选项 1：ng 样式和范围函数

ng-style 会让你这样做，为了保持整洁和可测试，你应该定义一个范围函数，如下所示（虽然 1.1.5 已经添加了 angular 的稳定 1.0.x 版本的 angular 表达式中目前不支持三元运算符三元支持）。

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 - 如果设置为 true，将为该指令创建一个新的范围。如果同一元素上的多个指令请求一个新范围，则只会创建一个新范围。

于 2013-08-31T19:22:00.557 回答