Изменить цвет фона из ввода

Question

Изменить цвет фона из ввода

0

Я использую угловой. У меня есть вход, который выглядит так:

<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:]

Muhambi 28 июнь 2015, в 06:05

Источник

Теги:

javascript

html

angularjs

css

2 ответа

1

Вот рабочий пример:

Для этого вам необходимо изменить 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp">
    <div  ng-controller="myFirst" ng-style="{{color()}}">Ajay</div></div>

A.J 28 июнь 2015, в 03:19

Ещё вопросы

Marcelo Gomes · Accepted Answer · 2015-06-28T02-11-00.000Z

Я привел пример для вас здесь: 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;
}