我有以下代码,当我在输入框中键入输入时,将显示输出。我希望能够为输出文本着色,同时将其保持在同一行。



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





所以我尝试了



<!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>





我完成了文本的着色,但是我希望所有文本都位于同一行,请告知我是否可以解决此问题,或者是否需要其他着色技术。

最佳答案

如果将“ div”更改为“ span”,它们将位于同一行。这是因为,span是行内元素,div是块行元素。



<!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>

09-19 07:30