Init jQuery после загрузки ng-опций

0

У меня есть файл 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-опций.

Теги:

2 ответа

0
Лучший ответ

Вы можете использовать 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);
                }
            });
      });         
   });
}]);
  • 0
    Это добилось цели. Я переместил весь этот jQuery из HTML в функцию $ timeout. Но теперь у меня есть другая проблема: Object ng-модель больше не заполняется, несмотря на то, что выбранный атрибут добавляется в опции в множественном выборе.
  • 0
    возможно, вы теряете область видимости, поэтому используйте $ scope. $ apply ()
Показать ещё 2 комментария
0

то, как вы пытаетесь сделать, это плохая практика.

вам нужно создать директиву для вашего мультиселекса и использовать его.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню