Как применить код CSS из массива в AngularJS?

Question

Я создаю веб-игру с различными уровнями и мне нужно изменить стиль div, используя код, хранящийся в массиве в AngularJS .В игре два экрана: на левом пользователь вводит код в HTML , а на правом показывает результат.Этот экран имеет фон и div с элементом, созданным кодом.Каждый уровень имеет свой стиль фона, поэтому его нужно загружать, когда пользователь изменяет текущий уровень.

Код HTML выглядит следующим образом:

<div id="background" ng-class="css"></div>

А код в AngularJS :

$scope.css = [
{
    //level one
    'background-image': 'url(url1)',
    'position' : 'absolute',
     ...
},
{
    //level two
    'background-image': 'url(url2)',
    ...
}];

Другой подход состоит в том, чтобы использовать переменную с именем $scope.cur_level, которую я использую для получения номера текущего уровня в ng-class с условиями:

ng-class="cur_level = '0' ? 'level_one' : 'level_two'"

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

Answer 1

Вот правильный способ использования директивы ng-class:

(function () {
	"use strict";
	const app = angular.module("app", []);

	app.controller("app.GameCtrl", $scope => {
      $scope.currentLevel = "1";
      $scope.setLevel = () => {
         $scope.currentLevel = $scope.currentLevel === '1' ? '2' : '1';
      };
		}
	);
	
})();

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
  color: #FFF;
  font-size: 3em;
}


.level-one {
  background-color: red;
}

.level-two {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.GameCtrl">
  <div class="container" ng-class="{'level-one': currentLevel === '1', 'level-two': currentLevel === '2'}">
    {{currentLevel}}
  </div>
  <a href="" ng-click="setLevel();">Change Level</a>
</div>