AngularJS : select에서 값을 가져 와서 HTML을 기반으로 삽입하십시오

Question

연락처 양식을 사용하고 있습니다. 요점은 JavaScript없이 액세스 할 수 있어야한다는 것입니다. 자바 스크립트를 사용할 수 있다면 방문객에게 연락 목적에 따라 세부 정보를 요청하고 싶습니다.

HTML은 (라벨이 목적에 건너 뜁니다 코드를 단축하기 위해) 같이 수 :

<form action=""> 
    <select name="purpose"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    ... 
    <button>Submit</button> 
</form> 

글쎄, 난 그냥 "모델"을 기반으로 표시 될 일부 지역을 추가 할 수 있다면. 하지만 JS없이 사람들에게 추가적인 필드를 보여주고 싶지 않기 때문에 나는 그것을 할 수 없습니다. 은 다음과 같이 될 것이다 :

<form action="" ng-app> 
    <select name="purpose" ng-model="purpose"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    ... 
    <div ng-show="purpose == 'support'"> 
     <input type="text" name="customernumber" /> 
    </div> 
    <div ng-show="purpose == 'interview'"> 
     Sorry, I'm not giving interviews 
    </div> 
    ... 
    <button>Submit</button> 
</form> 

요점은 내가 추가 질문을 많이 요구 될 것입니다. JS가 사용 중지되면 방문자는 모든 입력란과 메시지가있는 비 대한 연락처 양식을 보게됩니다.

나는 값을 읽고 JS 파일의 HTML을 특정 위치에 삽입하는 솔루션을 찾고 있습니다.

<form action="" ng-app> 
    <select name="purpose" ng-model="purpose"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    ... 
    {{injectedHTML}} 
    ... 
    <button>Submit</button> 
</form> 

이상하게 들리 겠지만 모든 시정촌의 요구 사항에 따라해야합니다. 그들은 JS가있는 사람들에게만이 특정 필드를 보여주고 자합니다. 어쩌면 접근성이 좋다고 생각할 수도 있습니다. 나는 잘 모르겠다.

감사합니다.

Answer 1

miensol 덕분에 "ng-include"를 사용하는 방법에 대해 생각하기 시작했습니다. 그런 다음 한 가지를 깨달았습니다. Angular는 HTML을 재정의 할 수 있습니다.

그래서 나는이 HTML과 함께 :

<form ng-controller="ContactController"> 
    <select ng-model="purpose" ng-options="p.title for p in possibilities track by p.value"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    <div ng-include="purpose.template"></div> 
</form> 

을 그리고 이것은 app.js :

(function(){ 
    var app = angular.module('myApp', []); 

    app.controller('ContactController', ['$scope', function($scope) { 

     // array with possible reasons, that we use as <option> in <select> 
     // the "AJ" is added so you can see the difference 
     $scope.possibilities = 
      [ 
       { title: 'AJ Just saying hi', value='hello', template: 'part-support.html'}, 
       { title: 'AJ Customer Support', value='support', template: 'part-support.html'}, 
       { title: 'AJ Interview', value='interview', template: 'part-interview.html'} 
      ]; 

     // select default <option> 
     $scope.purpose = $scope.possibilities[0]; 

    }]); 

})(); 

아직도 나는 (그리고 내 리그에서의)이 훨씬 더 기록 할 수 느낌이 있어요.

Answer 2

JavaScript가 비활성화되었을 때 요소 집합을 숨기려면 표시하지 않아야하는 요소에 ng-hide 클래스를 추가 할 수 있습니다. 예에서 :

는

<form action="" ng-app> 
    <select name="purpose" ng-model="purpose"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    ... 
    <div ng-show="purpose == 'support'" class="ng-hide"> 
     <input type="text" name="customernumber" /> 
    </div> 
    <div ng-show="purpose == 'interview'" class="ng-hide"> 
     Sorry, I'm not giving interviews 
    </div> 
    ... 
    <button>Submit</button> 
</form> 

ng-hide 클래스는 display: hidden을 설정합니다. JavaScript가 활성화 된 경우 ng-show은 조건을 평가하고 요소에서 ng-hide 클래스를 추가 또는 제거합니다.

또 다른 간단한 방법은 ng-include을 사용하여 적절한 경우 추가 콘텐츠를로드하는 것입니다. 이는 JavaScript가 활성화되었을 때만 작동하므로 분명히 JavaScript가 작동하지 않을 때 추가 필드가 숨겨집니다.

<form action="" ng-app> 
    <select name="purpose" ng-model="purpose"> 
     <option value="hello">Just saying hi</option> 
     <option value="support">Customer Support</option> 
     <option value="interview">Interview</option> 
    </select> 
    ... 
    <div ng-if="purpose == 'support'" ng-include="'views/supportField.html'"> 
    </div> 
    <div ng-if="purpose == 'interview'" ng-include="'views/interviewField.html'"> 
    </div> 

    ... 
    <button>Submit</button> 
</form>