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.
2 answers
solution1
3 ACCPTED 2017-03-03 12:23:13
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>
solution2
1 2017-03-03 12:24:48
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.