Question

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

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

面板名称为：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;

Answer 1

花了更多时间在代码上之后，我已经解决了我的问题。而不是使用＆＃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>

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

1 个答案: