CODEWITHSUNDEEP
cssangularjs
data2info
data2info

Reputation: 165

scope value in ng-style

I want to change the font color in an input field depending on the value in that field. Ng-style does not "see" the value of the scope. Thus the color doesn't change.

The code I used:

<input disabled name="saldo" type="text" class="form-control" placeholder="0.00" ng-model="saldo" ng-style="{'color': {{saldo}} < 0.00 ? 'red' : 'green') }">

This is the error i'm getting:

Error: [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 12 of the expression [{'color':  < 0.00 ? 'red' : 'green') }] starting at [< 0.00 ? 'red' : 'green') }].

So how can I get my 'saldo' value in the ng-style? (placing {{saldo}} outside the ng-style, gives the correct value)

Upvotes: 0

Views: 930

Answers (4)

Vivek Kumar
Vivek Kumar

Reputation: 1

Please use below code to change the font color in an input field depending on the value in that field <input disabled name="saldo" type="text" class="form-control" placeholder="0.00" ng-model="saldo" ng-style="{'color':saldo}">

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

This snipped may helps you.

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.saldo = 1;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
<input disabled name="saldo" type="text" class="form-control" placeholder="0.00" ng-model="saldo" ng-style="saldo < 0.00 ? {color: 'red'} : {color: 'green'}">
  </div>
</div>

Upvotes: 0

Nishi Bangar
Nishi Bangar

Reputation: 948

I would recommend doing this,

<input disabled name="saldo" type="text" class="form-control" 
       placeholder="0.00" ng-model="saldo" 
       ng-style="saldo < 0.00 ? {'color':'red'} : {'color':'green'}">

Hope this helps ..

Cheers

Upvotes: 3

gianlucatursi
gianlucatursi

Reputation: 680

You don't need of {{}} in ng-style.

Replace this:

<input disabled name="saldo" type="text" class="form-control" placeholder="0.00" ng-model="saldo" ng-style="{'color': {{saldo}} < 0.00 ? 'red' : 'green') }">

with this

<input disabled name="saldo" type="text" class="form-control" placeholder="0.00" ng-model="saldo" ng-style="{'color': saldo < 0.00 ? 'red' : 'green') }">

Upvotes: 1

Related Questions