如何将Angular ng-repeat返回值绑定到div的style属性？

当然可以把ng-repeat返回的值绑定到div的style属性上！你现在的问题核心是style属性的绑定语法不正确，AngularJS提供了专门的方式来处理动态样式绑定，我帮你一步步修正：

1. 错误原因分析 #

你原来的代码里这样写style是无效的：

<div class="row" id="clockwidget" style="background-color: "{{clock.LogicColor}};">

这种写法会让浏览器解析样式字符串时出现语法错误——你在双引号里又嵌套了双引号，而且Angular的插值表达式不能直接这么塞到style属性里。

2. 正确的样式绑定方式 #

AngularJS有两种常用的动态样式绑定方法：

方法一：使用ng-style指令（推荐） #

ng-style可以直接接收一个对象，对象的键是CSS属性名，值是对应的变量，写法清晰不易出错：

<div class="panel panel-default" ng-controller="HomeController" ng-init="init()">
 <pre>{{ClockLogic}}</pre>
 <br />
 <br />
 <div id="containerDiv" style="width: 100%;">
 <div id="clockDiv" style="width: 800px;" ng-repeat="clock in ClockLogic">
 <!-- 用ng-style绑定背景色和宽度 -->
 <div class="row" id="clockwidget" ng-style="{
     'background-color': clock.LogicColor,
     'width': clock.LogicClockWidth + 'px'
 }">
 <p>hello</p>
 </div>
 </div>
 </div>

• 注意：如果你的LogicClockWidth是百分比值（比如后台返回80而不是80%），就改成clock.LogicClockWidth + '%'
• 要确保LogicColor是合法的CSS颜色格式（比如#ff0000、red、rgb(255,0,0)），如果后端返回的字符串带多余引号，记得去掉。

方法二：直接在style属性里使用插值表达式 #

如果你更习惯直接写style属性，也可以调整引号嵌套来实现：

<div class="row" id="clockwidget" style="background-color: {{clock.LogicColor}}; width: {{clock.LogicClockWidth}}px;">

这种方式要注意：style属性用双引号的话，里面的插值表达式就别再嵌套双引号，否则会触发解析错误。

3. 后端数据的注意事项 #

确保你的后端接口/Home/SetClockTimes返回的response.data字段格式正确：

• LogicColor：必须是合法的CSS颜色值，不能有多余的引号或无效格式
• LogicClockWidth：如果是double类型的数字，前端需要拼接单位（px/%）才能让样式生效，比如clock.LogicClockWidth + 'px'

4. 测试小技巧 #

你可以修改控制台打印的代码，更清晰地查看数据结构：

console.log("data: ", $scope.ClockLogic); // 用逗号代替加号，能完整显示对象内容

这样能快速排查是不是数据本身的问题导致样式不生效。

内容的提问来源于stack exchange，提问作者user1397978