Question

我是角色和编程的新手，需要一些指导和帮助学习。我有一个html页面，有5个标签，“Who”，“What”，“Where”，“When”和“Events”。我有以下代码。如何在控制器中获取json类别条目并将它们分成与之相关的html选项卡？我感谢任何帮助。

//html
<div id="chartsContainer" class="row">
    <div class="col-xs-12">

            <div id="" class="row">
                <h3 class="pull-left" style="color:white">CHARTS</h3>
                <form ng-submit="filterCharts()" class="pull-right">
                    <!-- Single button -->
                    <div class="btn-group">
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        all <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Used</a></li>
                        <li><a href="#">Unused</a></li>
                      </ul>
                    </div>
                </form>
            </div>

            <div id="tabMasterContainer" ng-controller="TabsDemoCtrl">

                <tabset vertical="false" type="navType">
                <tab heading="Who">
                <a ng-click="groupBy( 'category' )">Category</a>
                        <div id="chartsList" class="row">

                            <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">

                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                        </div>

                </tab>
                <tab heading="What">
                    <div id="tabContainer">
                    <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>
                <tab heading="When">
                    <div id="tabContainer">
               <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>                  
                </tab>
                <tab heading="Where">
                    <div id="tabContainer">
                <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>
                <tab heading="Events">
                    <div id="tabContainer">
                <div id="" class="col-md-3" style="background-color:blue; height:100px; margin: 10px;" ng-repeat="chart in charts">
                                <p><i class="fa {{chart.icon}} fa-2x" style="color:white"></i></p>
                                <p style="color:white"> {{chart.description}} </p>
                            </div>
                    </div>
                </tab>

              </tabset>
            </div>


    </div>
  </div>




$scope.charts = [
        { id : 1, description: "Date Range", icon : "fa-camera-retro",         category : "When"},

        { id : 2, description: "Time of Day", icon : "fa-cog", category :     "When"},
        { id : 3, description: "Day of Week", icon : "fa-bar-chart-o", category : "When"},
        { id : 4, description: "Age Range", icon : "fa-wrench", category : "Who"},
        { id : 5, description: "who foo", icon : "fa-wrench", category : "Who"},
        { id : 6, description: "what foo", icon : "fa-wrench", category : "What"},
        { id : 7, description: "what foo", icon : "fa-wrench", category : "What"},
        { id : 8, description: "where foo", icon : "fa-wrench", category : "Where"},
        { id : 9, description: "where foo", icon : "fa-wrench", category : "Where"},
        { id : 10, description: "basketball foo", icon : "fa-wrench", category : "Events"},
        { id : 11, description: "Doctor Who Foo", icon : "fa-wrench", category : "Events"},
        { id : 12, description: "You foo", icon : "fa-wrench", category : "Who"},
        { id : 13, description: "Boo foo", icon : "fa-wrench", category : "Events"},
        { id : 14, description: "da bar", icon : "fa-rocket", category : "Where"}
    ]

我知道我需要遍历json，所以我写了这个

function chartFinder(chartArray, id){
for (var i = 0; i < chartArray.length; ++i) {
    if(id==chartArray[i].key)
       return id[i].value;
}

};

Answer 1

一个简单的方法。对于每个类别，请执行以下操作添加一个过滤器，它会自动为您完成。

ng-repeat="chart in charts|filter:{category: 'Where'}"

使用Angular排序到单独的列表中

1 个答案: