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（例如以下字符串：“ example”），因为这无关紧要-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>

使用CSS在AngularJS中使用图标样式化三角形图案

1 个答案: