由于某种原因我无法理解,我的select元素(使用ng-repeat
)不显示从DB检索的值。
源标记是:
<select class="form-control"
id="Test_Method_Select_{{$index}}"
ng-model="One_Source.Test_Method_Code"
style="width:150px">
<option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="{{One_Method.Value}}">
{{One_Method.Value}} - {{One_Method.Name}}
</option>
</select>
并且生成的(通过AngularJS)标记是:
<select class="form-control ng-pristine ng-valid ng-not-empty ng-touched"
id="Test_Method_Select_1"
ng-model="One_Source.Test_Method_Code"
style="width:150px">
<option value="? number:26 ?"></option>
<!-- ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
<option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="103" class="ng-binding ng-scope">103 - LC-MS-MS</option>
<!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
<option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="26" class="ng-binding ng-scope">26 - Pesticides - GCMS</option>
<!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
<option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="29" class="ng-binding ng-scope">29 - Aldicarb - LLE,GCMS</option>
<!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
</select>
该元素不显示26 - 农药 - GCMS,即使显示的值是收到的值。
使用Markus的建议,源标记现在看起来如下:
<select class="form-control"
id="Test_Method_Select_{{$index}}"
ng-model="One_Source.Test_Method_Code"
style="width:150px"
ng-options="item.Value as (item.Value + '-' + item.Name) for item in One_Source.Formatted_Test_Methods_List">
</select>
仍然,未显示所选值(注意:我在元素之前添加了Value from model: {{One_Source.Test_Method_Code}}
并显示了正确的值,但未在select元素中显示)。
你应该看看NgOptions。这是一个工作示例,我通过设置$scope.One_Source.Test_Method_Code
在控制器中设置选定的选项
angular.module("app",[]).controller("myCtrl",function($scope){
$scope.One_Source = {};
$scope.One_Source.Formatted_Test_Methods_List = [
{
value: 103,
name: 'LC-MS-MS'
},
{
value: 26,
name: 'Pesticides - GCMS'
},
{
value: 29,
name: 'Aldicarb - LLE,GCMS'
}
];
$scope.One_Source.Test_Method_Code = 29;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select class="form-control"
id="Test_Method_Select_{{$index}}"
ng-model="One_Source.Test_Method_Code"
style="width:150px"
ng-options="item.value as (item.value + '-' + item.name) for item in One_Source.Formatted_Test_Methods_List">
</select>
</div>