我需要你的帮助。我已经部分地解决了我的问题,但却无法弄清楚要动态制作的东西。
要求:我的两个面板只会根据下拉列表值的选择显示
面板名称为: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;
答案 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>