Plunker

Question

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

Answer 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>

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

1 个答案:

Plunker