javascript - AngularJS div background color with ngStyle -
one of div s observing background color variable ngstyle. anytime change the value, error. please see below, think more or less consistent example https://docs.angularjs.org/api/ng/directive/ngstyle
<div class="item item-divider" ng-style="scorecolor"><b>rate</b> {{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 not function @ camelcase (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11098:5) @ foreach.css (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11541:12) @ object.jqlite.(anonymous function) [as css] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11667:9) @ http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:57 @ foreach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20) @ ngstylewatchaction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:7) @ object.$watchcollectionaction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22809:13) @ scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22942:29) @ scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23205:24) @ $$debounceviewvaluecommit (http://localhost:8100/lib/ionic/js/ionic.bundle.js:31961:14)
the ng-style
expects object styles i.e.:
$scope.changescorecolor = function(score){ $scope.scorecolor = {'background-color': colorfromscore(score) }; };
you're passing string instead of object hence error.
here's documentation says expected ng-style
argument:
expression evals object keys css style names , values corresponding values css keys.
Comments
Post a Comment