ng-options未按预期从函数回调更新

时间:2016-11-04 09:21:46

标签: javascript jquery angularjs

我的js代码“ng-option”不会从函数回调中更新。

我尝试删除$ watch,“ng-option”中的选项会按预期显示。

我尝试逐步打印控制台日志。将打印用于查询的回调日志,但不会打印回调列表中的内容。 我可以从chrome网络中看到正确的输出,但没有在'select'元素中填充。

是由js插件tm.pagination引起的吗?

<body>
<div  ng-app="myApp" ng-controller="myController">
    <div>
        <table>
            <tr>
                <td>
                    <label>dataSet:</label>
                    <select ng-model="data_set" ng-options="option for option in dataSetList"/>
                </td>
                <td style="width: 20%"><button ng-click="queryData()" class="btn btn-primary" width="120px;">View</button>
                </td>
            </tr>
        </table>
    </div>
    <div >
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>ID</th>
            </tr>
            </thead>
            <tr ng-repeat="item in resultset">
                <td>{{item.image_id}}</td>
            </tr>
            </tbody>
        </table>
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', ['tm.pagination']);
    app.service('myService', ['$rootScope', function ($rootScope) {
        return {
            query: function (reqData, callBack) {
                SomeService.fun1(reqData, function (error, response) {
                    console.log("it is printed!")
                    if (error == 0) {
                        callBack(response);
                    }
                });
            },
            list: function (reqData, callBack) {
                console.log("it is printed")
                SomeService.fun2(reqData, function (error, response) {
                    console.log("ISSUE: it is not printed!")
                    if (error == 0){
                        callBack(response);
                    }
                });
            }
        };
    }]);

    app.controller('myController', ['$scope', 'myService', function ($scope, myService) {
        var getData = function () {
            var reqData = {
                // request
            }

            var successCb = function (response) {
                $scope.paginationConf.totalItems = response.result.totalcount;
                // other response
                $scope.$apply();
            }
            myService.query(reqData, successCb);
        };

        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 10
        };

        $scope.queryData = function () {
            getData();
        };

        var queryDims = function () {
            var reqData = {
            }
            var successCb = function (response) {
                // ISSUE: it will not come to this block
                $scope.dataSetList = response.result.data_set;
                $scope.$apply();
            }
            myService.list(reqData, successCb);
        };

        $scope.listDims = function () {
            queryDims();
        };

        $scope.listDims();

        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', getData);
    }]);
</script>
</body>

0 个答案:

没有答案