javascript - 带有ngStyle的AngularJS div背景色

我的一个div是使用ngStyle观察背景颜色变量。每当我更改该值时，都会出现错误。请参见下面，我认为我与该示​​例https://docs.angularjs.org/api/ng/directive/ngStyle大致相同

<div class="item item-divider" ng-style="scoreColor"><b>Rate</b>&nbsp;{{score}}</div>
<input type="range" name="rate" min="1" max="10" value="5" step="1" ng-model="score" ng-change="changeScoreColor(score)"/>

$scope.changeScoreColor = function(score){
    $scope.scoreColor = "{background-color:" + colorFromScore(score) + ";}";
};



TypeError: name.replace is not a function
    at camelCase (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11098:5)
    at forEach.css (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11541:12)
    at Object.JQLite.(anonymous function) [as css] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11667:9)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:57
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
    at ngStyleWatchAction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:7)
    at Object.$watchCollectionAction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22809:13)
    at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22942:29)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23205:24)
    at $$debounceViewValueCommit (http://localhost:8100/lib/ionic/js/ionic.bundle.js:31961:14)

最佳答案

ng-style需要具有以下样式的对象：

$scope.changeScoreColor = function(score){
    $scope.scoreColor = {'background-color': colorFromScore(score) };
};

您传递的是字符串而不是对象，因此出错。

这是有关期望的ng-style参数的文档说明：


  表达式等效于对象，其键为CSS样式名称和
  值是这些CSS键的对应值。

关于javascript - 带有ngStyle的AngularJS div背景色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34819718/