У меня есть файл cshtml с мультиселекцией. Теперь мне нужно переместить этот multiselect из заполнения с помощью.NET для заполнения AngularJS. Я создал выбор, как показано ниже, но когда страница загружается, в мой мультиселектив, заполненный угловым, добавлен атрибут display: none
а старый мультиселекция jQuery появляется без данных.
Я предполагаю, что когда инициализируется мультиселекция jQuery, данных нет. Поэтому, когда угловой хочет заполнить мультиселекцию, он создает новый с желаемыми значениями, но я не уверен, почему он не отображается.
<div class="row">
<div class="col-lg-12">
<div class="box">
<div ng-controller="CreateConfigCtrl" class="body">
<div class="form-group">
<label class="control-label col-lg-4">Configuration name</label>
<div class="col-lg-8">
<input type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-8">
<select multiple class="multipleSelect" ng-multiple="true" ng-model="object" ng-options="obj.Name for obj in model.XMLColumns" options-load="model.XMLColumns" size="16" name="test"></select>
</div>
</div>
<hr />
<div class="form-group" id="concatFieldsTextBoxes"></div>
<div id="Buttons" style="clear: left">
<input type="submit" class="btn btn-primary" value="Save config" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
function initSectionList() {
$(".multipleSelect").each(function (element) {
var b = $(this);
if (!b.data('init-multi')) {
b.multiselect2side({ 'search': 'Search: ' });
b.data('init-multi', true);
}
});
}
initSectionList();
});
</script>
Выше моя страница CSHTML и ниже моего CreateConfigCtrl.js
var app = angular.module('PdfConfig.CreateController', [])
app.controller('CreateConfigCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.model = {};
$http.get('CreateVM').success(function (data) {
$scope.model = data;
});
}]);
Я читал о добавлении директивы с $ timeout или $ watch, но я не понимаю, как инициализировать эту функцию jQuery после загрузки всех ng-опций.
Вы можете использовать ng-if для создания ng-опций после ответа службы, а затем вызвать функцию jquery с помощью $ timeout: - HTML: -
<div class="row">
<div class="col-lg-12">
<div class="box">
<div ng-controller="CreateConfigCtrl" class="body">
<div class="form-group">
<label class="control-label col-lg-4">Configuration name</label>
<div class="col-lg-8">
<input type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-8" ng-if="flag">
<select multiple class="multipleSelect" ng-multiple="true" ng-model="object" ng-options="obj.Name for obj in model.XMLColumns" options-load="model.XMLColumns" size="16" name="test"></select>
</div>
</div>
<hr />
<div class="form-group" id="concatFieldsTextBoxes"></div>
<div id="Buttons" style="clear: left">
<input type="submit" class="btn btn-primary" value="Save config" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function initSectionList() {
$(".multipleSelect").each(function (element) {
var b = $(this);
if (!b.data('init-multi')) {
b.multiselect2side({ 'search': 'Search: ' });
b.data('init-multi', true);
}
});
}
</script>
Угловой код js:
var app = angular.module('PdfConfig.CreateController', [])
app.controller('CreateConfigCtrl', ['$scope', '$http', function ($scope, $http,$timeout) {
$scope.model = {};
$scope.flag=false;
$http.get('CreateVM').success(function (data) {
$scope.model = data;
$scope.flag=true;
$timeout(function(){
$(".multipleSelect").each(function (element) {
var b = $(this);
if (!b.data('init-multi')) {
b.multiselect2side({ 'search': 'Search: ' });
b.data('init-multi', true);
}
});
});
});
}]);
то, как вы пытаетесь сделать, это плохая практика.
вам нужно создать директиву для вашего мультиселекса и использовать его.