javascript angular ng-repeat 根据条件添加样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18550822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular ng-repeat add style on condition
提问by Pacuraru Daniel
i am using ng-repeat on a list of divs and i am manually adding items in the json that it's rendering this divs. I need to position the last div that i add in json and it's automatically rendiring on the screen, where the couse cursor is, and the rest of them remain on same position, but without giving the position in the json that is rendering it.
我在一个 div 列表上使用 ng-repeat，我正在 json 中手动添加项目，它正在呈现这个 div。我需要定位我在 json 中添加的最后一个 div，它会自动在屏幕上渲染，因为光标所在的位置，其余的保持在相同的位置，但没有在渲染它的 json 中给出位置。
My approach on this was something like this
我的方法是这样的
<div ng-repeat="contact in jsonContacts" style="left: {{lastX}}px; top: {{lastY}}px;"></div>
but when i do this, all the divs get this position, so i need to make a condition using $last variable to add or remove the style tag with those left and top css.
但是当我这样做时，所有的 div 都会得到这个位置，所以我需要使用 $last 变量来创建一个条件，以添加或删除带有左侧和顶部 css 的样式标签。
Thank you in advance, Daniel!
提前谢谢你，丹尼尔！
回答by Chandermani
Based on you html, you should try this
基于你的 html，你应该试试这个
<div ng-repeat='contact in jsonContacts' ng-style='{"left":($last?lastX:null)+"px","top":($last?lastY:null)+"px"}'>{{item}}</div>
Here is the fiddle for confirmation http://jsfiddle.net/cmyworld/yFc6J/1/
回答by Andy Brown
See this fiddlefor examples of both approaches (using color as position is harder in jsfiddle)
有关这fiddle两种方法的示例，请参阅this （在jsfiddle中使用颜色作为位置更难）
Option 1: ng-style and a scope function
选项 1：ng 样式和作用域函数
ng-style will let you do this, and to keep it tidy and testable you should define a scope function such as below (ternary operators are not currently supportedin angular expressions for stable 1.0.x versions of angular, although 1.1.5 has added ternary support).
ng-style 会让你这样做，为了保持整洁和可测试，你应该定义一个作用域函数，如下所示（虽然 1.1.5 已经添加了稳定的 1.0.x 版本的角度表达式，但目前不支持三元运算符三元支持）。
ng-style='myStyleFunction($last)'
In the controller, define:
在控制器中，定义：
$scope.myStyleFunction = function($last) {
return {
'left': $last ? $scope.lastX + 'px' : '',
'top': $last ? $scope.lastY + 'px' : ''
};
}
Option 2: custom directives
选项 2：自定义指令
Or, you could think even more "angular" and define a directive:
或者，您可以考虑更多“角度”并定义指令：
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');
}
}
}
});
and then:
接着：
<div ng-repeat="contact in jsonContacts" position-last> ...
EDITThis works by using scope: trueand declaring the directive on the ng-repeatelement. As only one new scope is created for all directives on an element (assuming at least one requests a new scope) then it gets access to the ng-repeatscope values. For the relevant documentation see:
编辑这是通过scope: true在ng-repeat元素上使用和声明指令来工作的。由于只为元素上的所有指令创建了一个新范围（假设至少有一个请求新范围），因此它可以访问ng-repeat范围值。有关相关文档，请参阅：
scope - If set to true a new scope will be created for this directive. If multiple directives on the same element request a new scope, only one new scope is created.
scope - 如果设置为 true，将为该指令创建一个新范围。如果同一元素上的多个指令请求一个新范围，则只会创建一个新范围。
