홈>2020-02-01 00:38

javascript - AngularJS의 배열에서 CSS 코드를 적용하는 방법은 무엇입니까?

다른 레벨의 웹 게임을 만들고 있는데AngularJS의 배열 안에 저장된 코드를 사용하여 div 스타일을 변경해야합니다. 게임에는 두 개의 화면이 있습니다. 왼쪽은 사용자가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파일에서 생성되었습니다. 그러나 첫 번째 레벨의 스타일은 모든 레벨에 대해로드됩니다. 나는 정말로 배열 접근법을 사용하고 싶다. 가장 좋은 방법은 무엇입니까?

javascripthtmlcssangularjs

답변 # 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>

Python2.net

javascript - AngularJS의 배열에서 CSS 코드를 적용하는 방법은 무엇입니까?

관련 자료