根据下拉列表选择显示隐藏Div

时间:2017-11-19 11:22:25

标签: angularjs panel ng-show

我需要你的帮助。我已经部分地解决了我的问题,但却无法弄清楚要动态制作的东西。

要求:我的两个面板只会根据下拉列表值的选择显示

面板名称为:Panel_1和Panel_2 下拉列表值:Panel1和Panel2

我的代码工作正常如下:

下拉列表代码(硬编码):

<select name="type" ng-model="dataparameters.type" ng-dropdown required ng-change="SelectDDL()">

                                                        <option ng-option value="Panel 1">Panel 1</option>
                                                        <option ng-option value="Panel 2">Panel 2</option>
                                                    </select>

面板代码:

<div class="panel panel-default" style="width:650px" id="P1" ng-if="dataparameters.type == 'Panel 1'">
                    <div class="panel-heading">
                          Panel_1
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel1 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P1" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" style="width:650px" id="P2" ng-if="dataparameters.type == 'Panel 2'">
                    <div class="panel-heading">
                            Panel_2
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel2 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P2" />
                            </div>
                        </div>
                    </div>
                </div>

Angular.JS文件代码:

var application = angular.module('AddEditComponentApp', []);

application.controller('addeditcomponentcontroller', ['$scope', '$http', '$filter', function ($scope, $http, $filter) {
    $scope.Selected_DataParameters_Add = {}
 $scope.SelectDDL = function () {

        }
}]);

在这里,我们可以看到下拉列表是硬编码的。我已经从数据库中动态填充了我的下拉列表,但是在该面板可见性不起作用之后。

填写下拉列表的代码如下:

 <select id="Selected_DataParameters_Add" ng-model="$scope.Selected_DataParameters_Add" ng-options="dp.Data_Parameter_Name for dp in DataParameters" ng-dropdown required ng-change="Checked()">

                                                        <option ng-option value="">Select Data Fields</option>


                                                    </select>

我认为唯一的问题是我无法理解如何动态地将值填充到ng-option value =&#34;&#34;

1 个答案:

答案 0 :(得分:0)

花了更多时间在代码上之后,我已经解决了我的问题。而不是使用&#39; ng-if&#39;这可以通过&#39; ng-show&#39;来解决。在div标签下。

我已经替换了以下代码,现在它对我来说很好。

代码ng-if="dataparameters.type == 'Panel 1'"已替换为ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 1'"

完整的代码更改如下:

<div class="panel panel-default" style="width:650px" id="P1" ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 1'">
                    <div class="panel-heading">
                          Panel_1
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel1 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P1" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" style="width:650px" id="P2" ng-show="$scope.Selected_DataParameters_Add.Data_Parameter_Name=='Panel 2'">
                    <div class="panel-heading">
                            Panel_2
                    </div>
                    <div class="panel-body">
                        <div>
                            <label class="col-xs-6 control-label">Panel2 :</label>
                            <div class="col-xs-6">
                                <input type="number" class="form-control" ng-model="dataparameters.P2" />
                            </div>
                        </div>
                    </div>
                </div>