Стилизация треугольника с иконкой в ​​AngularJS с помощью CSS

Question

Я хочу заменить весь символ звезды в моем шаблоне любым значком CSS.Но все, что я получаю, это только один значок.Весь тег h1 заменяется одной звездочкой.Я не могу получить доступ к каждому символу в переменной, чтобы заменить его значком звезды, поскольку он связан с HTML в виде массива.

Я не понимаю.

<script>
var app = angular.module("demo", []);
app.controller("testCtrl", function($scope) {
   console.log("Inside test Controller");
   $scope.temp = "";
   $scope.printStars = function() {
      var n = $scope.givenNumber;
      $scope.values = [];
      $scope.temp = "";
      var i, j, k;
      k = 0;
      for (i = 1; i <= n; i++) {

         for (j = 1; j <= i; j++) {

            $scope.temp += "* ";

         }

         $scope.values.push($scope.temp)
         k++;
         $scope.temp = "";

      }
   }
});  
</script>

<div class="flex-control-nav" ng-controller="testCtrl">
   <input class="form-control" type="number" ng-model="givenNumber" ng-change="printStars()">
   <h1 class="fa fa-star" ng-repeat=" x in values">{{x}}</h1>
</div>

Я хочувывод будет треугольным шаблоном со значком, но не в тексте.

Answer 1

Я несколько изменил ваш исходный код, и теперь он работает. Это далеко от совершенства, но вы получите общее представление: с этим легко справиться, если вы представите двумерный массив (массив массивов). Как столбцы и строки. Я переименовал ваши переменные, чтобы лучше представить этот подход.

Также обратите внимание, что я полностью удалил строку "*", потому что она совсем не требуется. В строке, где я написал row.push (j), вы можете добавить что-нибудь вместо j (например, следующую строку: «пример»), потому что это не имеет значения - ng-repeat будет выполняться для каждого элемента, а значение равно не используется.

Опять же, это далеко от совершенства, но, я надеюсь, приведет вас в правильном направлении!

var app = angular.module("demo", []);
app.controller("testCtrl", function($scope) {
   $scope.temp = "";
   $scope.rows = []; // init empty array
   
   $scope.printStars = function() {
      var n = $scope.givenNumber;
      $scope.rows = [];
      
      for(var i = 1; i<=n; i++){
        var row = [];
        for(j = 1; j<=i; j++){
          row.push(j);
        }
        $scope.rows.push(row);
      }
   }
});  

.row{
  display:inline-block; /* to make sure rows' stars appear next to each other */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div ng-app="demo">
  <div class="flex-control-nav" ng-controller="testCtrl">
     <input class="form-control" type="number" ng-model="givenNumber" ng-change="printStars()">
     <div ng-repeat="x in rows">
        <div ng-repeat="y in x" ng-if="x" class="row">
          <h1 class="fa fa-star" ng-if="y" ></h1>
        </div>
     </div>
  </div>
</div>