Modify input field background color

Question

Modify input field background color

In my Angular project, I have an input field structured like this:

<input class="form-control" type="text" ng-model="newBook.color">

Whenever the value in this input changes, I want to dynamically change the background color of a specific div.

Within my controller, I have defined the following variables:

$scope.newBook = {};
$scope.newBook.color = "";

$scope.color = ->
  return "background-color: " + $scope.newBook.color;

The div that should reflect the color change looks like this:

<div ng-style="{{color()}}"></div>

Despite my efforts, I encountered an error message stating:

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 17 of the expression [background-color:]

javascript html css angularjs

Answer 1

Answer №1

Here's a sample I put together: https://jsfiddle.net/chelogui/2h3hrj1x/

Code Snippet:

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

angular.module('appTest', [])
    .controller('contr', [function () {
    var self = this;
    self.color = "red";
}]);

Css Example:

#divTest {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin-top: 10px;
}

Answer 2

Here's a sample I put together: https://jsfiddle.net/chelogui/2h3hrj1x/

Code Snippet:

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

angular.module('appTest', [])
    .controller('contr', [function () {
    var self = this;
    self.color = "red";
}]);

Css Example:

#divTest {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin-top: 10px;
}

Answer 3

Answer №2

Take a look at this demonstration:

To achieve the desired outcome, you must modify your color function like so:

angular.module('myApp',[])
   .controller('myFirst',['$scope',function($scope){
      $scope.newBook = {};
      $scope.newBook.color = "red";
      $scope.color = function(){
        return "{'background-color' : '"+$scope.newBook.color+"'}";
      }
}])

Verify with the following code snippet:

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>

Answer 4

Take a look at this demonstration:

To achieve the desired outcome, you must modify your color function like so:

angular.module('myApp',[])
   .controller('myFirst',['$scope',function($scope){
      $scope.newBook = {};
      $scope.newBook.color = "red";
      $scope.color = function(){
        return "{'background-color' : '"+$scope.newBook.color+"'}";
      }
}])

Verify with the following code snippet:

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>

Modify input field background color

Answer №1

Answer №2

Similar questions

What is the process for executing a GET/POST request and receiving a JSON response on a webpage?

How can I eliminate the outline from the modal backdrop using Material UI styling shown in the image provided?

Broadcast and listen to events in AngularJS using `$rootScope.$emit`

Implementing React hooks to efficiently remove multiple items from an array and update the state

Choose a column in a table and organize it in ascending or descending order with the help

Could you please suggest a method to position a button that is not entirely on the right side?

I'm trying to understand a JSON object that has multiple key names pointing to a single value. How can I properly interpret this in

Shuffle order of AngularJS ng-repeat array

Chinese Input Causing Triggered Computed Problem in Vue 2

Is it acceptable to reference all JS files in index.html in Angular?

Can you explain the functionality of this CSS rule: ~"-moz-calc(..)"?

Relocate the resizable handles in jQuery outside of the div elements

Preventing Div items from rearranging during size transitions using toggleClass

Struggling to dynamically generate class names with clsx in combination with TailwindCss

CSS: Specify `left:0` or `left:0px` to position

Adjust the margin-top based on the height of another element

Analysis of printing functionality across Chrome, Safari, and Firefox browsers

I'm having trouble adding two Owl carousels in two separate rows

Are you ensuring compliance with licensing in your Webpack bundles?

Calculating the total length of an SVG element using React