【问题标题】：Add elements dynamically from selected combo box value in angular js从角度js中的选定组合框值动态添加元素
【发布时间】：2015-06-14 13:21:16
【问题描述】：

我想在从组合框中选择值“LIKE”时添加一个文本框，并在选择值“BETWEEN”时添加两个日期选择器。

现在我可以使用ng-change 方法读取选定的值，但我无法弄清楚如何根据选定的下拉值添加元素。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Text Box</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script>
            angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope)
            {
                $scope.comboBox = []
                $scope.addDropDown = function ()
                {
                    $scope.comboBox.push('');
                }
                $scope.deleteDropDown = function (index)
                {
                    $scope.comboBox.splice(index, 1);
                }
                $scope.changedValue = function (item) 
                {
                    alert(item);
                }
            });
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1">

            <ul>
                <button ng-click="addDropDown()">add</button>
                <button ng-click="deleteDropDown()">Delete</button>
                <li ng-repeat="dropDown in comboBox track by $index">
                    <select ng-model="valueSelected" ng-change="changedValue(valueSelected)">
                        <optgroup>
                            <option value="LIKE">LIKE</option>
                            <option value="BETWEEN">BETWEEN</option>
                            <option value="EXISTS">EXISTS</option>
                            <option value="Like">IN</option>
                            <option value="NOT">NOT</option>
                            <option value="OR">OR</option>
                            <option value="ISNULL">ISNULL</option>
                            <option value="UNIQUE">UNIQUE</option>
                            <option value="=">=</option>
                            <option value="!=">!=</option>
                            <option value=">">></option>
                            <option value="<"><</option>
                            <option value=">=">>=</option>
                            <option value="<="><=</option>
                        </optgroup>
                    </select>
                </li>
            </ul>
        </div>
    </body>
</html>

【问题讨论】：

只需使用ngSwitch。

标签： angularjs

【解决方案1】：

您已经在您的选择中设置了 ng-model，因此只需使用内置指令在模型匹配时显示您想要的内容。您可以使用：ngShow/ngHide、ngIf 等，但可能 ngSwitch 最适合此应用程序。

Plunker

<select ng-model="valueSelected">
  <option value="like">LIKE</option>
  <option value="between">BETWEEN</option>
  <option value="exists">EXISTS</option>
</select>
<div ng-switch on="valueSelected">
  <div ng-switch-when="like">I show when LIKE is selected</div>
  <div ng-switch-when="between">I show when BETWEEN is selected</div>
  <div ng-switch-when="exists">I show when EXISTS is selected</div>
  <div ng-switch-default>I show by default</div>
</div>

【讨论】：

如何使用 ng-switch 添加类似文本框的 dom 元素
只要将你想要显示的内容放在相应的 ng-switch-when 指令的 div 中。
在选择介于之间时如何选择范围日期选择器。日期选择器是否有任何内置指令？
没有，但是有3rd party directives。这是我提供的answer，用于使用 UI Bootstrap 的日期选择器作为范围选择器。
我已经从这个链接下载了第三方 dateRangePicker：github.com/RGkevin/datetimeRangePicker 如何在 Netbeans IDE 中安装或使用它。