【问题标题】:Angularjs not working in bootstrap selectpickerAngularjs在引导选择选择器中不起作用
【发布时间】:2015-06-05 19:41:59
【问题描述】:

我正在创建一个 Web 应用程序,我在其中使用 bootstrap selectpicker 进行选择。但我正在使用 angularjs 填充选择选择器。我有 2 个选择,其中一个内容根据第一个选择值填充,无需重新加载。 . 我可以在没有 selectpicker 的情况下完美地工作,而在使用 selectpicker 时它不起作用.. 我的代码是

<div class="form-group" data-ng-controller="MARK_ENTRY_CONTROLLER">
    <div class="row">
        <div class="col-md-6  " style="margin-top: 7px;">
            <label>Select Class</label>
        </div>
        <div class="col-md-6 text-center">
            <select class="form-control" title="Select Class" 
                name="fromClass" ng-change="EXAM_LIST_JSON(fromClass)"
                ng-model="fromClass"
                ng-options="fromClass.id as fromClass.course + ' ' + fromClass.section for fromClass in ALL_CLASS">
                </select>
        </div>
    </div>
    <div class="row" style="height: 10px"></div>
    <div class="row">
        <div class="col-md-6  " style="margin-top: 7px;">
            <label>Select Examination</label>
        </div>
        <div class="col-md-6 text-center" >
            <select class="form-control" name="examination"
                ng-change="SUBJECT_LIST_IN_EXAM_JSON()"
                ng-model="examination"
                ng-options="examination.id as examination.name for examination in EXAM_LIST"></select>
        </div>
    </div>

控制器是

<script>
    function MARK_ENTRY_CONTROLLER($scope, $http) {
        $http.get("<%=request.getContextPath()%>/ALL_CLASS_JSON?AAdvisorId=${uid}").success(function(response) {
                        $scope.ALL_CLASS = response;
                        $scope.EXAM_LIST_JSON = function(id){
        $http.get("<%=request.getContextPath()%>/EXAM_LIST_JSON?fromClass="+id)
                                .success(function(response) {
                                    $scope.EXAM_LIST = response;
                                    $scope.$apply();
                            });
                        }

                    });
    }
</script>

在控制器中,数据列表是从使用 json 格式的 json 文件中获取的。 请帮帮我..

【问题讨论】:

    标签: json angularjs bootstrap-select


    【解决方案1】:

    bootstrap-select 隐藏所有选择器,并且选择器的数据在 $('select').selectpicker() 命令的执行之后才出现。

    但是如何解决这个问题呢?

    我也遇到过类似的问题:

    <select class="fontsize" data-style="btn-info" name="fontsize" ng-controller="fontSize">
        <option data-ng-repeat="size in sizes" name="{{size}}" value="{{size}}">{{size}}</option>
    </select>
    

    还有我的控制器

    app.controller('fontSize', function($scope, $http) {
        $http.get("/getSelector/font-size")
            .success(function(response) {
                $scope.sizes = response.records;
                // TODO: How to refresh the selectpicker after changing of scope?
            });
    });
    

    您可以在收到数据后刷新选择器:

    $scope.$watch(function() {
        $('.fontsize').selectpicker('refresh');
    });
    

    好的,希望对你有帮助。

    【讨论】:

    • 你拯救了我的一天。谢谢!
    • 是否可以不依赖jQuery?
    • 引导选择选择器需要 jQuery,这是一个 jQuery 插件。现在我想知道为什么不想使用jQuery?
    • 无论如何,没有,我找到了另一个线索:“如果通过 JavaScript 调用 bootstrap-select,您需要将代码包装在 $(document).ready() 块中或将其放在底部页面的(在引导选择的最后一个实例之后)。”好吧,我还没有测试过。这可能是更好或“正确”的解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-26
    • 2017-11-15
    • 2020-05-01
    • 1970-01-01
    • 2013-08-28
    相关资源
    最近更新 更多