>

다른 레벨의 웹 게임을 만들고 있는데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파일에서 생성되었습니다. 그러나 첫 번째 레벨의 스타일은 모든 레벨에 대해로드됩니다. 나는 정말로 배열 접근법을 사용하고 싶다. 가장 좋은 방법은 무엇입니까?


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

  • 이전 mysql 데이터베이스로 내 앱 gluon을 디버거하면 휴대 전화에서 열리지 않는 이유
  • 다음 php - img의 src에 fileName 만 남기는 reggular 표현식이 필요합니다