オブジェクトの配列からのデータが表示されないアンギュラngrepeat

Question

ngrepeatがデータを表示していないので、私が何をしているのか疑問に思っていました。

私はここにフィドルの上 http://jsfiddle.net/e0e7dee5/

<div ng-controller="MyCtrl"> 
    <div class="container-fluid"> 
     <div ng-repeat="u in utilities.all"> 
      {{u.name}} 
     </div> 
    </div> 
</div> 

を持っているが、右すべきですか？

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    //var utilities = this; 

    var utilities = {}; 

    utilities.all = [{ .... }]; // this is my data it is in the fiddle 
    console.log(utilities.all); // this displays array of objects 

} 

Answer 1

あなたはscopeを使用せずにこれをしたいならば、あなたはHTMLに、コントローラから変数をバインドするthisを使用することができます$ scope.utilities = {};

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
\t //var utilities = this; 
 

 
    $scope.utilities = {}; 
 

 
    $scope.utilities.all = 
 
    [{ 
 
     "programId": 1062, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Electric", 
 
     "programName": "Test Program 24", 
 
     "rate": 0.0775, 
 
     "term": 12, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 4.95, 
 
     "etf": 100, 
 
     "unitOfMeasureName": "KwH", 
 
     "meterNumberLength": null, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:325" 
 
    }, { 
 
     "programId": 1063, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Electric", 
 
     "programName": "Test Program 12", 
 
     "rate": 0.0875, 
 
     "term": 24, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 5.95, 
 
     "etf": 150, 
 
     "unitOfMeasureName": "KwH", 
 
     "meterNumberLength": null, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:326" 
 
    }, { 
 
     "programId": 1064, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Gas", 
 
     "programName": "Test Gas Program 12", 
 
     "rate": 0.555, 
 
     "term": 12, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 1, 
 
     "etf": 10, 
 
     "unitOfMeasureName": "Therm", 
 
     "meterNumberLength": 5, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:333" 
 
    }]; 
 
    
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    
 
<div class="container-fluid" ng-repeat="u in utilities.all"> 
 
    <div> 
 
    {{u.name}} 
 
    </div> 
 
</div> 
 
    
 
</div>

Answer 2

にvar utilities = {};を変更する必要があります。この

ng-controller="MyCtrl as vm"

ようなHTML使用controllerAsで

そしてvm参照コントローラアクセスに

ng-repeat="u in vm.utilities.all"

を使用して変数にアクセスしthisキーワードを使用して変数に値を代入

this.utilities = {} 

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
\t //var utilities = this; 
 

 
    this.utilities = {}; 
 

 
    this.utilities.all = 
 
    [{ 
 
     "programId": 1062, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Electric", 
 
     "programName": "Test Program 24", 
 
     "rate": 0.0775, 
 
     "term": 12, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 4.95, 
 
     "etf": 100, 
 
     "unitOfMeasureName": "KwH", 
 
     "meterNumberLength": null, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:325" 
 
    }, { 
 
     "programId": 1063, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Electric", 
 
     "programName": "Test Program 12", 
 
     "rate": 0.0875, 
 
     "term": 24, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 5.95, 
 
     "etf": 150, 
 
     "unitOfMeasureName": "KwH", 
 
     "meterNumberLength": null, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:326" 
 
    }, { 
 
     "programId": 1064, 
 
     "name": "Atlantic City Electric", 
 
     "utilityTypeName": "Gas", 
 
     "programName": "Test Gas Program 12", 
 
     "rate": 0.555, 
 
     "term": 12, 
 
     "serviceReference": false, 
 
     "accountNumberTypeName": "Account Number", 
 
     "accountNumberLength": 10, 
 
     "msf": 1, 
 
     "etf": 10, 
 
     "unitOfMeasureName": "Therm", 
 
     "meterNumberLength": 5, 
 
     "zip": "85281", 
 
     "$$hashKey": "object:333" 
 
    }]; 
 
    
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl as vm"> 
 
    
 
<div class="container-fluid" ng-repeat="u in vm.utilities.all"> 
 
    <div> 
 
    {{u.name}} 
 
    </div> 
 
</div> 
 
    
 
</div>