gpt4 book ai didi

javascript - 如何在 Angular JS 中为 {{expression}} 文本着色并将所有文本保留在一行中?

转载 作者:行者123 更新时间:2023-11-28 14:56:47 24 4
gpt4 key购买 nike

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

<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是 block 行元素。

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

关于javascript - 如何在 Angular JS 中为 {{expression}} 文本着色并将所有文本保留在一行中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42578716/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com