加载ng

加载ng-options后的init jQuery(Init jQuery after ng-options were loaded)

我有一个带有多选的cshtml文件。 现在我必须将多重选择从填充.NET转移到填充AngularJS。 我已经创建了如下所示的select，但是当页面加载时，对于填充了Angular的我的multiselect，添加了一个display: none属性，旧的jQuery multiselect出现时没有数据。

我的猜测是，当初始化jQuery multiselect时，没有数据存在。 因此，当angular想要填充多选时，它会创建一个具有所需值的新值，但我不确定它为什么不显示。

<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的指令，但是我不明白如何在加载所有ng-options之后初始化jQuery函数。

I have a cshtml file with a multiselect. Now I have to move that multiselect from being populated with .NET to being populated with AngularJS. I have created the select as showed below, but when the page loads, to my multiselect that was populated with Angular is added a display: none attribute and the old jQuery multiselect appears with no data in it.

My guess would be that when the jQuery multiselect is initialized, there is no data present. So when angular wants to populate the multiselect it creates a new one with the desired values, but I'm nt sure why it isn't displayed.

<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>

Above is my CSHTML page and below my 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; }); }]);

I've read about adding a directive with $timeout or $watch, but I don't understand how to initialize that jQuery function after all the ng-options were loaded.

最满意答案

你可以使用ng-if在服务响应后创建ng-options然后用$ timeout调用你的jquery函数： - 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>

Angular 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); } }); }); }); }]);

You can use ng-if to create ng-options after service response then call your jquery function with $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>

Angular js code:

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