Question

请帮我解决如何让内圈完成下一行的星星。以下是我的代码，请让我知道我在哪里犯了错误，所以可以纠正并获得所需的答案。请随意运行它，这样你就可以从这个程序中了解我想要实现的目标。

我使用AngularJS编写了以下代码：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/..." integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax..."></script>
        <style>
            .numFormat{
                color:cornflowerblue;
                font-size: 25px;
                font-weight: 500;
            }
            .resultWindow{
                padding-left: 35px;
            }
        </style>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            <div class="jumbotron">
                <h5>Enter number to - Print Fibonacci Series :</h5>
                <br>
                <input class="form-control" type="number" ng-model="givenNumber" ng-change="printStars()">
            </div>
            <section class="container-fluid resultWindow">
                <p class="numFormat">{{temp|newlines}}</p>
            </section>
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.filter('newlines', function () {
                return function(text) {
                    if(text)
                        return text.replace(/\n/g, '<br>');
                    return '';
                }
            });

            app.controller('myController', function ($scope) {
                $scope.printStars = function() {
                    var n = $scope.givenNumber;
                    $scope.temp = "";
                    var i,j;
                    for(i=0; i<n ; i++) {
                        for(j=n-i; j>0; j--) {
                            $scope.temp += "* ";
                        }
                        $scope.temp += '<p>';
                    }
                }
            });
        </script>
    </body>
</html>

Answer 1

您需要 ng-bind-html.

  <p  ng-bind-html="trustAsHtml(temp)"></p>

<强>样本

var app = angular.module('myApp', []);

app.filter('newlines', function () {

return function(text) {

if(text)

return text.replace(/\n/g, '<br>');

return '';

}

});

app.controller('myController', function ($scope,$sce) {

$scope.printStars = function(){

var n = $scope.givenNumber;

$scope.temp = "";

var i,j;

for(i=0; i<n ; i++)

{

for(j=n-i; j>0; j--)

{

$scope.temp += "* ";

}

$scope.temp += '<p>';

}

}
 $scope.trustAsHtml = function(html){
    return $sce.trustAsHtml(html);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
 
<style>
.numFormat{
color:cornflowerblue;
font-size: 25px;
font-weight: 500;
}
.resultWindow{
padding-left: 35px;
}
</style>

</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<div class="jumbotron">

<h5>Enter number to - Print Fibonacci Series :</h5>

<br>

<input class="form-control" type="number" ng-model="givenNumber" ng-change="printStars()">

</div>

<section class="container-fluid resultWindow">

<p  ng-bind-html="trustAsHtml(temp)"></p>

</section>

</div>

 
</body>

</html>

如何在AngularJS中打印星星？

1 个答案: