Question

这就是我的代码的样子

<md-button ng-style="connectivityColorFor({{ connection.org }})">{{  connection.skyhigh.api  }}</md-button>

在控制台上，我看到了

connectivity:{"api":"connected","collector":"not_connected"}

但是当我做的时候

<md-button ng-style="connectivityColorFor({{ connection.org.api }})">{{  connection.skyhigh.api  }}</md-button>

我得到了

connectivity:undefined

并在JS上，我的代码是

  $scope.connectivityColorFor = function(connectivity) {
    console.log('connectivity:' + JSON.stringify(connectivity));
    return {"background-color": connectivityTypes[connectivity]}
  }
  var connectivityTypes = {
    'connected': '#8BC34A',
    'not_configured': '#EF6C00',
    'not_connected': '#EF5350'
  }

这里有什么问题？

Answer 1

不需要插入参数，ngStyle指令$eval - 是针对范围的整个表达式。你应该只使用

<md-button ng-style="connectivityColorFor(connection.org.api)"></md-button>

Here是一个简单的工作示例。

Answer 2

竞争是一个对象，所以如果你写connectivityTypes[connectivity] 你会得到不确定的。您必须使用connectivity.someProperty之类的：

    return {"background-color": connectivityTypes[connectivity.api]}

ng-style不适用于嵌套对象？

2 个答案: