AngularJS 和带有 ng-repeat 的 ng-style答案

【问题标题】：AngularJS and ng-style with ng-repeatAngularJS 和带有 ng-repeat 的 ng-style
【发布时间】：2016-07-10 15:04:59
【问题描述】：

我在使用 ng-style 和 ng-repeat 时遇到问题。

这是我的代码：

<div style="display:table-row" ng-repeat="row in Data.Communications" id="{{row.Guid}}">
    <div style="display:table-cell;">
      <img ng-src="{{row.Path}}" ng-show="row.Path" ng-style="row.Style" />
      <i class="{{row.Icon}}" ng-show="row.Icon" ng-style="row.Style"></i>
    </div>
</div>

这是 JSON（从数据库加载的服务器端）：

$scope.Data: {"LastUpdate":"23/03/2016 11:45","Communications":[{"Guid":"2","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"1","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"3","Path":"/images/blink_yellow.gif","Icon":null,"Style":"{'width':'15px', 'height':'15px'}"}]}

“样式”不适用于我的元素。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript css angularjs ng-repeat ng-style

【解决方案1】：

基本上您已经对 JSON 进行了加密，在将其分配给 ng-style 之前先对其进行解析

ng-style="doParseToJson(row.Style)"

代码

$scope.doParseToJson = function(style){
   return JSON.parse(style);
}

还要确保响应应该用 " 双引号而不是像 '{"color":"#ffff00"}' 这样的单引号括起来，以保持它在解析 JSON 时有效。

【讨论】：