Question

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

＆＃13;

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

＆＃13;

然后我尝试了

＆＃13;

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

＆＃13;

我完成了文本的着色，但是我希望这一切都在同一条线上，如果我能解决这个问题，或者我需要不同的着色技术，请提出建议。

Answer 1

如果将'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>

Answer 2

只需添加display:inline样式属性。

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

＆＃13;

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

＆＃13;

如何为角度JS中的{{expression}}文本着色并将所有文本保留在一行中？

2 个答案: