調用嵌套範圍的問題

Question

所以我在玩AngularJS，想要製作兩個單獨的技能列表。列出我的發展技能和一個爲我的設計技能。

問題是我的數據來自開發嵌套作用域正在呈現，但來自設計嵌套作用域的數據不是。我可能會做錯什麼？

這裏是我的JS：

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

zkwskApp.controller('SkillsController', function($scope){ 
    $scope.skills = 
    { development: [ 
     { name: 'CSS3', level: 5, priority: 2}, 
     { name: 'HTML5', level: 5, priority: 1}, 
     { name: 'AngularJS', level: 1, priority: 3} 
     ] 
    }, 
    { design: [ 
     { name: 'Design Thinking', level: 4, priority: 3} 
     ] 
    }, 
    { management: [ 
     { name: 'SCRUM', level: 4, priority: 3} 
     ] 
    }; 
}); 

這裏是我的HTML /模板：

<ul class="small-12 medium-4 columns"> 
     <li ng-repeat="skill in skills.development"> 
     {{ skill.name }} 
     </li> 
    </ul> 
    <ul class="small-12 medium-4 columns"> 
     <li ng-repeat="skill in skills.design"> 
     {{ skill.name }} 
     </li> 
    </ul> 

Answer 1

試試這個

zkwskApp.controller('SkillsController', function($scope){ 
    $scope.skills = 
    { development: [ 
     { name: 'CSS3', level: 5, priority: 2}, 
     { name: 'HTML5', level: 5, priority: 1}, 
     { name: 'AngularJS', level: 1, priority: 3} 
     ], 
    design: [ 
     { name: 'Design Thinking', level: 4, priority: 3} 
     ], 
    management: [ 
     { name: 'SCRUM', level: 4, priority: 3} 
     ] 
    }; 
}); 

Answer 2

試試這個代碼。

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

zkwskApp.controller('SkillsController', function($scope){ 
    $scope.skills = 
    { development: [ 
     { name: 'CSS3', level: 5, priority: 2}, 
     { name: 'HTML5', level: 5, priority: 1}, 
     { name: 'AngularJS', level: 1, priority: 3} 
     ], 

    design: [ 
     { name: 'Design Thinking', level: 4, priority: 3} 
     ], 

    management: [ 
     { name: 'SCRUM', level: 4, priority: 3} 
     ] 
    }; 
});