加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

这样您也可以获取“选定”颜色.这几乎是我用你提供的信息告诉你的全部内容.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读