AngularJS: Получить значение из select и ввести HTML на основе этого

Question

Я работаю над контактной формой. Дело в том, что он должен быть доступен без JavaScript. Если доступен 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 посетитель увидит раздутую контактную форму со всеми полями и сообщениями.

Я ищу решение, которое будет считывать значение и вводить HTML из 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> 
    ... 
    {{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>