无法使用ng-repeat访问对象数据

时间:2014-05-28 13:44:43

标签: angularjs

我有一个使用路由的应用程序,我正在使用我的第一条路线。视图正确加载,我能够访问链接到视图的控制器中的数据对象,但不能访问控制器中的函数中创建的对象。以下是代码段:

HTML:

<div>
    <label>Select Table : </label>
    <select ng-init="permits.lookups.selectedLookup = lookupLists[0].list" ng-model="permits.lookups.selectedLookup" ng-options="lookupList.list as lookupList.desc for lookupList in lookupLists" ng-change="populateLookup(permits.lookups.selectedLookup)"></select>
    Selected lookup:  {{permits.lookups.selectedLookup}}
    <table>
        <tbody>
            <tr><td>first row</td></tr>
            <tr ng-repeat="column in columns"><td>{{column.name}}</td></tr>
            <tr><td>last row</td></tr>
        </tbody>
    </table>
</div>

JS:

(function() {
    var app = angular.module('lookups',[]);
    app.controller('UpdateLookups', function($scope, $http) {
        var lookups = this;

        $scope.lookupLists = [
            {list : "0",          "desc" : "--Select List--"},
            {list : "del_type",   "desc" : "Delivery Type"},
            {list : "pay_type",   "desc" : "Payment Types"},
            {list : "trans_type", "desc" : "Transaction Type"}
        ];

        $scope.selectedLookup = $scope.lookupLists[0].list;

        $scope.populateLookup = function(lookup) {
            $http({
                url      : <some URL>
                dataType : "json",
                method   : "POST",
                data     : "action=3&lookup="+lookup,
                headers  : {"Content-Type" : "application/x-www-form-urlencoded; charset=utf-8"}
            }).success(function(data) {
                if ( angular.isArray(data.columns)) {
                    lookups.columns = data.columns;
                } else {
                    lookups.columns = [data.columns];
                }
            }).error(function(error){
                alert("There was an error");
            });
        };
    });
})();

加载后,使用lookupLists对象中的数据正确初始化选择选项,当用户更改所选选项时,ng-change指令成功触发populateLookup函数,该函数成功填充lookups.columns对象。问题是我很难将lookups.columns对象与我的表中的ng-repeat指令绑定。我试图使用columns,lookups.columns和permits.lookups.columns引用该对象,但我似乎无法访问它。

我尝试在我的主控制器中做类似的事情,经过研究,我发现如果我创建了一个变量并为其分配了“this”,那么在创建我的对象时引用该变量,它就起作用 - 我的假设是“this”的赋值有效地允许函数在范围之外的范围内分配对象。我试图通过创建查找来做到这一点,但这似乎没有帮助。我可以看到lookups.columns确实是创建的,但它不在控制器的$ scope中。我只是在学习AngularJS(请保持温和),并且仍然试图绕过所有绑定和范围限制。我猜我的答案是建立一个服务/工厂并注入它,但当我尝试根据我见过的所有例子做到这一点时,它打破了我工作的部分,所以我回到这个起点,至少其他一切都有效。

1 个答案:

答案 0 :(得分:0)

也许你忘了'column'变量前面的'$ scope'。

像这样:

$scope.populateLookup = function(lookup) {
        $http({
            url      : <some URL>
            dataType : "json",
            method   : "POST",
            data     : "action=3&lookup="+lookup,
            headers  : {"Content-Type" : "application/x-www-form-urlencoded; charset=utf-8"}
        }).success(function(data) {
            if ( angular.isArray(data.columns)) {
                $scope.columns = data.columns;
            } else {
                $scope.columns = [data.columns];
            }
        }).error(function(error){
            alert("There was an error");
        });
    };