Элемент select не отображает полученное значение в AngularJS - PullRequest
0 голосов
/ 27 августа 2018

По какой-то причине я не понимаю, мой элемент 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 , хотя это значение показано как полученное.

Редактировать

Используя предложение Маркуса, разметка источника теперь выглядит следующим образом:

<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).

1 Ответ

0 голосов
/ 27 августа 2018

Вместо этого вы должны взглянуть на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...