角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添加样式的条件

回答

相关问题