AngularJS：从选择中获取价值并基于它注入 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 后，访问者将看到一个包含所有字段和消息的臃肿联系表单。

我正在寻找一种可以读取 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>