почему ngRepeat не работает со значением в angularjs

Question

У меня есть следующий код

http://jsfiddle.net/wnWY6/682/

HTML

<div ng-app>
    <div ng-controller="TestCtrl" ng-repeat="icecream in iceCreams track by $index">
        <div ng-repeat="a in range(icecream.rating)"> star icon</div>
        <div ng-repeat="a in range(icecream.rating)"> star icon</div>
    </div>
</div>

JS

function TestCtrl($scope) {
        $scope.iceCreams = [
        {
        name: "toto",
        rating: "3",
      },
      {
        name: "fofo",
        rating: "4",
      },
    ];
    $scope.range = function(n) {
        return new Array(parseInt(n));
    };
};

Но он не отображаетсяничего, я не уверен, что я делаю неправильно.Любая помощь будет по достоинству оценена.Спасибо

Answer 1

Если вы используете ng-controller, вам необходимо зарегистрировать свой контроллер в модуле.Но перед этим вам нужно создать экземпляр модуля с помощью ng-app="app".

Затем достаточно добавить для рабочего примера:

angular.module('app', []).controller('TestCtrl', TestCtrl);

Помимо этой проблемы, вам нужно отделить ng-controller и ng-repeat, или у вас будет несколько экземпляров одного и того же контроллера.Кроме того, вам нужно track by $index для внутреннего ng-repeat, который вы используете.

---

Полный код:

angular.module('app', []).controller('TestCtrl', TestCtrl);

function TestCtrl($scope) {
  $scope.iceCreams = [{
      name: "toto",
      rating: "3",
    },
    {
      name: "fofo",
      rating: "4",
    },
  ];
  $scope.range = function(n) {
    return new Array(parseInt(n));
  };
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="app" ng-controller="TestCtrl">
  <div ng-repeat="icecream in iceCreams track by $index">
    <div ng-repeat="a in range(icecream.rating) track by $index"> star icon</div>
    <div ng-repeat="a in range(icecream.rating) track by $index"> star icon</div>
  </div>
</div>