选择元素不会在AngularJS中显示接收的值

问题描述 投票:0回答:1

由于某种原因我无法理解,我的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元素中显示)。

angularjs html-select
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.