【发布时间】：2017-11-19 22:39:23
【问题描述】：
我需要你的帮助。我已经部分解决了我的问题，但无法找出动态解决问题的方法。
要求：我有两个面板，它们只会根据下拉列表值的选择出现
面板名称为：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=""
【问题讨论】：
-
你可以检查这个answer 它也尝试创建和使用 ng-option
-
我已经查看了该答案，但这对我不起作用。当我使用硬代码值填充下拉列表时，请查看我的代码工作正常。但我的实际要求是用我已成功完成的数据库填充下拉列表。但在动态填充下拉列表后，面板可见性无法根据下拉列表值的选择工作。