Question

我有一个带有多选的cshtml文件。现在我必须将多选从移植到.NET填充到AngularJS。我已经创建了如下所示的select，但是当页面加载时，添加了一个display: none属性并添加了<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>属性，并且显示旧的jQuery multiselect，其中没有数据。

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

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

上面是我的CSHTML页面，下面是我的CreateConfigCtrl.js

$('div#ChampionInput').on('click', 'a.AddChange',function(){
    //alert($(this).parent("div.Spell").children( "div.Change").length);
    $(this).after(

我已经阅读过使用$ timeout或$ watch添加指令，但我不明白如何在加载所有ng-options后初始化该jQuery函数。

Answer 1

你试图做的是不好的做法。

你需要create a directive为你的multiselect2side并使用它。

Answer 2

您可以使用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);
                }
            });
      });         
   });
}]);

加载ng-options后的init jQuery

2 个答案: