与AngularJS一起苦苦挣扎

时间:2015-07-15 11:35:12

标签: angularjs

我是AngularJS的新手,但我正在努力将数组中的数据通过范围输出到视图中。我有一个数组,我正在努力让每个特定的项目出来,例如'按工作类型划分的费用摘要'

非常感谢任何帮助

这是Angular:

 $scope.lynchMenu = [
  { MenuFunction: 'Interact', MenuText: 'Job Status YTD Summary',                   MenuObject: 'JobStatusYTDSummary',                  MenuType: 'Report', MenuActive: 1, MenuOrder: 1 },
  { MenuFunction: 'Interact', MenuText: 'Costs Summary By Customer',                MenuObject: 'CostsSummaryByCustomer',               MenuType: 'Report', MenuActive: 1, MenuOrder: 2 },
  { MenuFunction: 'Interact', MenuText: 'Costs Summary By Job Type',                MenuObject: 'CostsSummaryByJobType',                MenuType: 'Report', MenuActive: 1, MenuOrder: 3 },
  { MenuFunction: 'Interact', MenuText: 'Costs Summary By Management Company',      MenuObject: 'CostsSummaryByManagementCompany',      MenuType: 'Report', MenuActive: 1, MenuOrder: 4 },
  { MenuFunction: 'Interact', MenuText: 'WIP Summary By Management Company',        MenuObject: 'WIPSummaryByManagementCompany',        MenuType: 'Report', MenuActive: 1, MenuOrder: 5 },
  { MenuFunction: 'Interact', MenuText: 'WIP Detail By Management Company',         MenuObject: 'WIPDetailByManagementCompany',         MenuType: 'Report', MenuActive: 1, MenuOrder: 6 },
  { MenuFunction: 'Interact', MenuText: 'Incomplete Jobs By Management Company',    MenuObject: 'IncompleteJobsByManagementCompany',    MenuType: 'Report', MenuActive: 1, MenuOrder: 7 },

]; //LynchMenu Layout

这是HTML

 <div class="panel-body">
            <ul class="list-unstyled"> 
            <li ng-repeat="MenuObject in lynchMenu">  
                    {{MenuObject}} <!--Data-binding expression -->
                </li><!--List-->      
            </ul><!--Unordered List-->
        </div><!--Panel Body-->

1 个答案:

答案 0 :(得分:0)

使用要在html

上显示的对象指定属性
<div class="panel-body">
            <ul class="list-unstyled"> 
            <li ng-repeat="MenuObject in lynchMenu">  
                    {{MenuObject.MenuText}} {{MenuObject.MenuType}} {{MenuObject.MenuActive}} <!--Data-binding expression -->
                </li><!--List-->      
            </ul><!--Unordered List-->
        </div><!--Panel Body-->

对于过滤ng-repeat,您可以使用angularjs过滤器