Привязать выбранное значение к Multi Select Listbox для элемента управления, используя AngularJS

Question

У меня проблемы в нижеследующем сценарии. Может ли кто-нибудь помочь мне?

Сценарий: Получите идентификаторы, разделенные запятыми, из БД, которые уже были введены пользователем, и разделите значения, затем свяжите значения в элементе управления Multi Select List в режиме редактирования.

Я попытался выполнить следующий фрагмент кода, но он не работает для меня.

@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));
}

Прикрепленный скриншот.

Код:

Контроль:

Answer 1

Учитывая, что ваш ввод имеет формат 1,2,3,4,5, вы можете разделить ввод и использовать директиву ng-options для заполнения <options> из <select>. Обратите внимание, что выбранная вами опция входит в selectedOption, а ng-model требуется, чтобы идти вместе с ng-options.

В качестве примечания: Никогда не смешивайте AngularJS с jQuery. Я слышал о случаях, когда $ путался между jQuery и AngularJS. Все может быть сделано в AngularJS без jQuery. (Как показано ниже)

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>