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

Question

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.

Why don't you use CSS for styling – shubham agrawal Mar 03 '17 at 12:22 — shubham agrawal, Mar 03 '17 at 12:22

score 3 · Accepted Answer · answered Mar 03 '17 at 12:23

3

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>

answered Mar 03 '17 at 12:23

Emre

337
1
3
18

Or OP can simply use CSS styles – Weedoze Mar 03 '17 at 12:23
Thanks but for clarification, why someone may want to use extra css when he/she can solve that by using span element? – Emre Mar 03 '17 at 12:57
I mean using css on the span with ID or class instead of ng-style – Weedoze Mar 03 '17 at 12:58

Raman Sahasi · Answer 2 · 2017-03-03T12:31:37.333

1

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>

edited Mar 03 '17 at 12:31

answered Mar 03 '17 at 12:24

Raman Sahasi

30,180
9
58
71

If you see previous answer also solves the problem using instead of div, any idea which method is better practice, I mean any disadvantages or advantages, – DannyBoi Mar 03 '17 at 12:45
It's better to use span, instead of inline divs generally, especially for html validation. Of course there may be extraordinary situations that you may want to use div. For reference check answers at: http://stackoverflow.com/questions/1611065/span-vs-div-inline-block – Emre Mar 03 '17 at 12:55
1

@DannyBoi if your element is `inline` or `inline-block` use a ``. If it's a block level element, use a `
`. Obviously if you can change the element type, then switch to ``. If you can't, then changing css might help. So I would suggest to go with @Emre 's answer
– Raman Sahasi Mar 03 '17 at 13:12

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

2 Answers2