使用 AngularJS 将所​​选值绑定到多选 ListboxFor 控件

Posted 2023-05-08

【中文标题】使用 AngularJS 将所​​选值绑定到多选 ListboxFor 控件

【英文标题】：Bind selected value to Multi Select ListboxFor control using AngularJS

【发布时间】：2018-10-14 00:23:13

【问题描述】：

我在以下情况下遇到问题，谁能指导我。

场景： 从已经用户输入的数据库中获取逗号分隔的 ID，然后拆分值，然后在编辑模式下将值绑定到多选列表框控件。

我尝试了以下代码来实现它，但它不适合我。

@html.ListBoxFor(c => c.ClientDemographicHospitalId, new MultiSelectList(Model.Hospitals, "Value", "Text"), new  ng_model = "hospitalDropdownList", @class = "HospitalListbox", style = "width:65%" )

var lstSelectedIDs = employee.ClientDemographicHospitalId;
var arySelectedID = lstSelectedIDs.split(",");

for (var i = 0; i <= arySelectedID.length; i++) 
    $scope.hospitalDropdownList.append($('<option></option>').val(arySelectedID[i].Value).html(arySelectedID[i].Text));

附上截图。

代码：

控制：

【问题讨论】：

为什么要混合使用 jquery 和 AngularJS？这是一个不好的做法

【参考方案1】：

鉴于您的输入格式为1,2,3,4,5，那么您可以拆分输入并使用ng-options 指令填充<select> 的<options>。请注意，您选择的选项进入selectedOption，并且ng-model 必须与ng-options 一起使用。

附带说明：不要永远将 AngularJS 与 jQuery 混合使用。我听说过 $ 在 jQuery 和 AngularJS 之间混淆的情况。在没有 jQuery 的情况下，一切都可以在 AngularJS 中完成。 （如下所示）

var app = angular.module("MyModule", []);

var MyController = function($scope) 
  $scope.text = "";
  $scope.selectedOption;

  $scope.populateDropDown = function() 
    $scope.allIds = $scope.text.split(",");
  

app.controller(MyController, "[$scope, MyController]");

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyModule" ng-controller="MyController">
<input id="ids" type="text" ng-model="text" placeholder="1,2,3,4,5"/>
<select id="list" ng-model="selectedOption" ng-options="x for x in allIds">

</select>

<button ng-click="populateDropDown()">Populate</button>
</div>