Angularjs 从angular js中选定的组合框值动态添加元素_Angularjs

Angularjs 从angular js中选定的组合框值动态添加元素

angularjs

Angularjs 从angular js中选定的组合框值动态添加元素,angularjs,Angularjs,我想在从组合框中选择值“like”时添加一个文本框，在选择值“BETWEEN”时添加两个日期选择器现在，我能够使用ng change方法读取所选值，但我无法理解如何根据所选下拉值添加元素 <html lang="en"> <head> <meta charset="UTF-8"> <title>Text Box</title> <script src="//ajax.goo

我想在从组合框中选择值“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>


文本框
角度.module（'controllerAsExample'，[]）.controller（'SettingsController1'，function（$scope）
{
$scope.comboBox=[]
$scope.addDropDown=函数（）
{
$scope.comboBox.push（“”）；
}
$scope.deleteDropDown=函数（索引）
{
$scope.comboBox.splice（索引，1）；
}
$scope.changedValue=函数（项）
{
警报（项目）；
}
});

添加
删除

喜欢
之间
存在
在里面
不
或
ISNULL
独特的
=
!=
>
>=
您已经在select上设置了ng模型，所以只需使用内置指令在模型匹配时显示所需的内容。您可以使用：ngShow/ngHide、ngIf等，但ngSwitch可能最适合此应用程序

喜欢
之间
存在
选择“喜欢”时显示
选择“介于之间”时显示
选择“存在”时显示
我默认显示
Just use。如何使用ng switch添加类似dom元素的文本框只需将要显示的内容放在div中，并使用相应的ng switch when指令。选择“介于之间”时，如何选择范围日期选择器。是否有日期选择器的内置指令？没有，但有。我提供了一个将UI引导的datepicker用作范围选择器的示例。我已从以下链接下载了第三方dateRangePicker：如何在Netbeans IDE中安装或使用它。
<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>