Фильтр и автоматический выбор выпадающего меню

Question

Я новичок в angularjs и все еще учусь.У меня есть этот код ниже.Я хочу загрузить данные в раскрывающийся список из базы данных.Например, данные из базы данных New Construction Я хочу загрузить все данные из функции LoadDropdown, и по умолчанию выбран New Construction.

HTML

<select name="ScopeofWork" class="form-control" ng-model="drpScopeWork" ng-options="SoW as SoW.label for SoW in ScopeOfWorkList">
    <option value="" selected hidden></option>
</select>

JS

function LoadDropdown() {
    $scope.ScopeOfWorkList = [{ value: 'New Construction', label: 'New Construction' },
    { value: 'Erection', label: 'Erection' },
    { value: 'Addition', label: 'Addition' },
    { value: 'Renovation', label: 'Renovation' },
    { value: 'Repair', label: 'Repair' }];
}

fnLoadDropdown();

function fnLoadDropdown() {
    var url = '/AccessoryGroundPreparation/LoadScopeofWork';
    $http({
        method: "post",
        url: url,
        //data: { "ScopeOfWork": ScopeOfWork, "projectID": projectID }
    }).then(function (res) {
        var data = res.data;
        if (data.data == null)
            LoadDropdown();
        else {
          // $scope.drpScopeWork = $scope.ScopeOfWorkList[0];
            $scope.drpScopeWork = data.data;
        }
    });
}

Answer 1

Используйте ng-init, чтобы присвоить значение вашей модели drpScopeWork Форма 0 Индекс вашего массива, такой как ng-init="drpScopeWork = ScopeOfWorkList[0].value"

Вот рабочий фрагмент кода:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.ScopeOfWorkList = [{
      value: 'New Construction',
      label: 'New Construction'
    },
    {
      value: 'Erection',
      label: 'Erection'
    },
    {
      value: 'Addition',
      label: 'Addition'
    },
    {
      value: 'Renovation',
      label: 'Renovation'
    },
    {
      value: 'Repair',
      label: 'Repair'
    }
  ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <select name="ScopeofWork" class="form-control" ng-model="drpScopeWork" ng-options="SoW.value as SoW.label for SoW in ScopeOfWorkList" ng-init="drpScopeWork = ScopeOfWorkList[0].value">
    </select>
  </div>
</div>