angular ng在条件下重复添加样式

angular ng-repeat add style on condition

本文关键字：添加 样式 条件下 ng angular      更新时间：2023-09-26

我在一个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的样式标记。

提前谢谢你，丹尼尔！

基于你的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/

请参阅fidd以了解这两种方法的示例（在jsfiddle中使用颜色作为位置更难）

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

ng样式可以让你做到这一点，为了保持它的整洁和可测试性，你应该定义一个范围函数，如下所示（尽管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> ...

EDIT这是通过使用scope: true并在ng-repeat元素上声明指令来实现的。由于一个元素上的所有指令都只创建了一个新的作用域（假设至少有一个指令请求一个新作用域），因此它可以访问ng-repeat作用域值。有关相关文件，请参阅：

  • 指令：指令定义对象（范围/真）

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

相关文章：