时间戳

首页 > 解决方案 > 过滤并自动选择下拉 angularjs

angularjs - 过滤并自动选择下拉 angularjs

问题描述

我是 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;
        }
    });
}

标签： angularjs

解决方案

用于为数组的模型表单索引ng-init分配一个值，例如drpScopeWork0ng-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>

推荐阅读