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>

好吧，如果可以的话，我只想添加一些将根据 "model" 显示的区域。但我做不到，因为我不想向没有 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

要在禁用 JavaScript 时简单地隐藏一组元素，您可以将 ng-hide class 添加到不应显示的元素。例如：

<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 class 集 display: hidden。启用 JavaScript 后，ng-show 将评估条件并从元素中添加或删除 ng-hide class。

另一个相当简单的解决方案是在适当的时候使用 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>

Answer 2

感谢 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];

    }]);

})();

我仍然觉得它可以写得更好（而且它超出了我的能力范围）。

AngularJS：从select获取值并基于它注入HTML

AngularJS: Get value from select and inject HTML based on it

html

select

angularjs