angularJS 다음 값으로 넘어갔습니다.

Question

안녕하세요, 두 개의 JSP 페이지가 1 & 2 개 있습니다. 1 단계에서 사용자가 선택할 수있는 특정 카테고리 옵션을 표시하고 있습니다. 사용자가 2 단계로 가려면 카테고리 옵션 중 하나를 클릭해야하며 2 단계로 가면서 클릭 한 카테고리의 이름을 표시하려고합니다. 나는 ng-model을 알고 있습니다. 입력에 바인드하여 입력에서 상호 작용하는 것을 표시 할 수 있지만, ng 모델을 "p"또는 "span"에 바인딩하면 작동하지 않습니다. AngularJs에 처음 왔으므로 어떤 신참 실수라도 해주십시오.

step_one.jsp

<div class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span> 
     <p ng-model="category">Cutlery &#38; Service</p> 
</div> 

step_two.jsp

<div class="col-md-12"> 
      <label for="requestCategory">Category:</label> 
      <p id="requestCategory" ng-model="category">{{category}}</p> 
     </div> 

JS는 단계 전환 :

$scope.setStep = function (step){ 
     $scope.step = step; 
    }; 

    $scope.isStepSet = function(step){ 
     return ($scope.step === step) ; 
    }; 

Answer 1

당신이 클라이언트 측 개발 대 서버를 섞여서 있습니까를?

각 JSP에는 2 개의 AngularJS가로드되어 있다고 가정합니다. 대부분의 앵귤러 앱은 단일 페이지 (즉, 하나의 JSP)에서 작동하고 다양한 콘텐츠를 동적으로로드/표시합니다 (예 : 각도보기를 통해). 단일 페이지 응용 프로그램 (SPA)은 단일 페이지 내에서 상태를 유지하며 Angular는 $ scope로이를 수행 할 수있는 구조를 제공합니다 (localStorage를 사용하여이 작업을 수행 할 수도 있음).

기존 웹/서버 측 개발 모델에서 클라이언트 측 모델로 전환하는 것처럼 보입니다. 위에서 수행 할 작업을 수행하려면 1 JSP 모든 것을 유지하고 다음 코드를 사용할 수 있습니다

HTML을

<div ng-show="isStepSet(1)" ng-init="setStep(1)" class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span> 
    <p ng-model="category">Cutlery &#38; Service</p> 
</div> 

<div ng-show="isStepSet(2)" class="col-md-12"> 
    <label for="requestCategory">Category:</label> 
    <p id="requestCategory" ng-model="category">{{category}}</p> 
</div>