Question

由于某种原因，我无法理解，我的select元素（带有ng-repeat）不显示从数据库检索到的值。

源标记是：

<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元素中未显示）。

Answer 1

您应该改为查看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>

Select元素在AngularJS中不显示收到的值

编辑

1 个答案: