Я использую угловой. У меня есть вход, который выглядит так:
<input class="form-control" type="text" ng-model="newBook.color">
в основном, когда это изменяется, я хочу изменить цвет фона div.
Мой контроллер имеет несколько строк, которые выглядят так:
$scope.newBook = {};
$scope.newBook.color = "";
$scope.color = ->
return "background-color: " + $scope.newBook.color;
а затем div, который я хочу изменить:
<div ng-style="{{color()}}"></div>
Однако я получаю сообщение об ошибке: Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 17 of the expression [background-color:]
Я привел пример для вас здесь: https://jsfiddle.net/chelogui/2h3hrj1x/
HTML:
<div ng-app="appTest">
<div ng-controller="contr as controller">
<input class="form-control" type="text" ng-model="controller.color" />
<div id="divTest" style="background-color: {{ controller.color }}"></div>
</div>
</div>
Javascript:
angular.module('appTest', [])
.controller('contr', [function () {
var self = this;
self.color = "red";
}]);
Css к примеру:
#divTest {
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
Вот рабочий пример:
Для этого вам необходимо изменить color
функцию:
angular.module('myApp',[])
.controller('myFirst',['$scope',function($scope){
$scope.newBook = {};
$scope.newBook.color = "red";
$scope.color = function(){
return "{'background-color' : '"+$scope.newBook.color+"'}";
}
}])
Проверь это:
angular.module('myApp',[])
.controller('myFirst',['$scope',function($scope){
$scope.newBook = {};
$scope.newBook.color = "red";
$scope.color = function(){
return "{'background-color' : '"+$scope.newBook.color+"'}";
}
}])
<script src="/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myFirst" ng-style="{{color()}}">Ajay</div></div>