CODEWITHSUNDEEP
javascripthtmlangularjscolors
DannyBoi
DannyBoi

Reputation: 646

How to color the {{expression}} text in angular JS and keep all the text in one line itself?

I have the following code, when I type an input into the input box, an output is displayed. I want to be able to color the output text and at the same time keep it on the same line.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="">
  Input some text here....<input value="abcd" type="text" ng-model="did" placeholder="Enter name here" ng-init="did='Lorem Ipsum'">
  <br><br> I want to color the following text : <br><br> {{did}}
</div>

So then I tried 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-app="">
Input some text here....<input value="abcd" type="text" ng-model="did" placeholder="Enter name here" ng-init="did='only this'">
<br><br>
I want to color <div ng-style="myObj"> {{did}} </div> and this text should be on the same line.
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "blue",
  }
});
</script>
</body>
</html>

I accomplished the coloring of the text, but I want it all to be on the same line, kindly advise if I can get this fixed or if I need a different coloring technique.

Upvotes: 0

Views: 1030

Answers (2)

Raman Sahasi
Raman Sahasi

Reputation: 31901

Just add display:inline style attribute.

$scope.myObj = {
    "color": "blue",
    "display": "inline"
}


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
    <div ng-app="">
        Input some text here....
        <input value="abcd" type="text" ng-model="did" placeholder="Enter name here" ng-init="did='only this'">
        <br>
        <br> I want to color
        <div ng-style="myObj"> {{did}} </div> and this text should be on the same line.
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.myObj = {
                "color": "blue",
                "display": "inline"
            }
        });
    </script>
</body>

</html>

Upvotes: 1

Emre
Emre

Reputation: 367

If you change 'div' to 'span' they will be on the same line. This is because of, span is in-line element, div is block-line element.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-app="">
Input some text here....<input value="abcd" type="text" ng-model="did" placeholder="Enter name here" ng-init="did='only this'">
<br><br>
I want to color <span ng-style="myObj"> {{did}} </span> and this text should be on the same line.
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = {
    "color" : "blue",
  }
});
</script>
</body>
</html>

Upvotes: 3

Related Questions