angularjs – 使用ng-Style更改背景颜色
发布时间:2020-12-17 07:13:34 所属栏目:安全 来源:网络整理
导读:如何使用ng-style更改背景颜色? 这个Div会重复,所以其中一个颜色来自DB.对于plnkr我只修复了颜色,但在我的例子中是这样的: div class="col-md-offset-0 col-md-2" ng-repeat="type in types" style="margin-bottom:5px;" div class='container' divCheckbo
如何使用ng-style更改背景颜色?
这个Div会重复,所以其中一个颜色来自DB.对于plnkr我只修复了颜色,但在我的例子中是这样的: <div class="col-md-offset-0 col-md-2" ng-repeat="type in types" style="margin-bottom:5px;"> <div class='container' divCheckbox ng-style="{'background-color':(isSelected?'{{type.color}}':'#ccc')}> <input type='hidden' ng-model="type.show" /> <div class="label">{{type.name}}</div> </div> </div> 指令: .directive('divCheckbox',function () { return { restrict: 'A',link: function (scope,el,attr) { scope.isSelected = el.find('input').val() == 'false'; el.on('click',function () { scope.isSelected = !scope.isSelected; scope.$apply(); }); } } }); 继承人我的plnkr:http://plnkr.co/edit/onLA8vSbtwQu1OxZrKzT?p=preview 解决方法
您不能在标签内执行三元条件,并且由于未引用背景颜色而导致错误.您必须引用它,或使用camelCase,而条件应在控制器中设置.
因此,修复方法是使用表示颜色(或完整样式对象)的范围变量并使用它,如下所示:http://plnkr.co/edit/iYkSa2I1ysZutdkAKkuh?p=preview UPDATE 下面是一个示例,您可以使用它来使您的代码与您的数据库一起工作(我在这里调用外部JSON,但原理是相同的):http://plnkr.co/edit/Kegs95NNyGGySMDzhQed?p=preview 这样您也可以获取“选定”颜色.这几乎是我用你提供的信息告诉你的全部内容. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |