Question

我希望在ng-repeat下拉列表中使用默认选项，例如＆＃34;请选择＆＃34;在零指数。

并且当我们从数据库编辑记录时，下拉列表应显示保存的选择。

以下是HTML页面代码：

APIInterface.GetRecordWithoutParam(EndPoint.Admin, apiRoute.StockReportList, function (response) {
        if (response.isSuccess) {
            $scope.ReportList = response.result._ReportTypeResponse;
        }
        else {
            $scope.ErrorData.errorMessage = response.message;
            $scope.ErrorData.isError = true;
            HideLoader();
        }}, function (err) { HideLoader(); });

这是controllerjs代码：

{{1}}

由于仅限Ritesh

Answer 1

使用范围对象绑定列表

$scope.DataUploadModel={
ReportTypeId:0;
}

Answer 2

检查以下代码是否有效。

您可以使用ngOptions生成选择选项，它还会选择ng-model中指定的值（如果不希望默认设置任何值，只需设置$scope.DataUploadModel = { ReportTypeId: '' };

对于占位符，例如please select空选项，其值为黑色将起作用。

P.S。为了使其工作，已将硬编码值添加到`ReportList＆＃39;

HTML：

<div ng-controller="MyCtrl">
 <select ng-options="rpt.ID as rpt.ReportTypeName for rpt in ReportList" ng-model="DataUploadModel.ReportTypeId">
     <option value="">Please select</option>
 </select>
</div>

JS：

var myApp = angular.module('myApp', []);


function MyCtrl($scope) {
  $scope.DataUploadModel = {
    ReportTypeId: 2
  };
 $scope.ReportList = [{
   ID: 1,
   ReportTypeName: "name1"
 }, {
   ID: 2,
   ReportTypeName: "name2"
 }];
}

检查this fiddle。

更新：

阅读this链接的Choosing between ngRepeat and ngOptions部分。

在许多情况下，可以在元素上使用ngRepeat而不是ngOptions来实现类似的结果。

但是，ngOptions提供了一些好处：



通过选择作为理解表达式的一部分，如何分配模型的灵活性



通过不为每个重复实例创建新范围来减少内存消耗


通过在documentFragment中创建选项而不是单独
来提高渲染速度

具体而言，从Chrome和Internet Explorer / Edge中的2000个选项开始，选择重复选项会显着减慢速度。

但是如果您想使用ng-repeat，那么您可以使用下面的ng-selected。

 <select ng-model="DataUploadModel.ReportTypeId" class="inp w100">
<option value="0" label="Please Select"></option>
<option repeat-end="onEnd()" ng-repeat="lst in ReportList" value="{{lst.ID}}" ng-selected="lst.ID == DataUploadModel.ReportTypeId">
  {{lst.ReportTypeName}}
</option>

lst.ID的数据类型可能会产生影响。

检查this fiddle

在编辑时选择ng-repeat下拉列表

2 个答案: