rowspan并使用angularjs中的ng-repeat设置关键字

时间：2016-12-07 11:35:31

标签： angularjs 

 [{"Student_RollNo":"MP16002","Student_Course":"AMST", "MarkSheet":[
{"Subject_ID":"FCB C A03","Credit":"5","Subject_Type":"C"}, 
{"Subject_ID":"FCB M W08","Credit":"2","Subject_Type":"W"},
{"Subject_ID":"FCB M W09","Credit":"3","Subject_Type":"W"}]},
 {"Student_RollNo":"MP16003", "Student_Course":"AMST",  "MarkSheet":[      
  {"Subject_ID":"FCB M A03","Credit":"7","Subject_Type":"C"},     
  {"Subject_ID":"FCB M W08","Credit":"4","Subject_Type":"W"},
  {"Subject_ID":"FCB M W09","Credit":"3","Subject_Type":"W"} ]}]

码

      <div ng-repeat="obj in jsondata" >   
         Rollno:  {{obj.Student_RollNo}}               
         <table>    <tr >
                            <td ><b>SR. NO.</b></td>
                            <td ><b>COURSE CODE</b></td>                               
                            <td ><b>COURSE CREDITS</b></td>
                            </tr>                            
                            <tr ng-repeat="obj1 in obj.MarkSheet">
                                <td>{{$index+1}}</td>
                                <td>{{obj1.Subject_ID}}</td>                                   
                                <td>{{obj1.Credit}}</td>
                            </tr>                                                  
                    </table> </div>

输出

 Rollno:  MP16002
 sr.no.    Code     Credit
  1     FCB C A03    7
  2     FCB M B01    7 
  3     FCB M W08    4
  4     FCB M W09    3

必需输出：

Rollno:  MP16002
 sr.no.    Code     Credit
  1     FCB C A03    7
  2     FCB M B01    7 
  Workshop
  3     FCB M W08    4
  4     FCB M W09    3

我想将Workshop关键字用于不同的Subject_Type 我尝试ng-show，但当我尝试打印时出现问题，它使用ng-show显示所有隐藏行

请指导我

提前致谢

2 个答案:

答案 0 :(得分：0)

请查看以下摘录

＆＃13;
＆＃13; 
(function () {
    'use strict';

    var app = angular.module('ExampleApp', ['angular.filter']);

    app.controller('ExampleCtrl', function ($scope, $http) {

        $scope.jsondata = [
            {
                "Student_RollNo": "MP16002", "Student_Course": "AMST", "MarkSheet": [
                    { "Subject_ID": "FCB C A03", "Credit": "5", "Subject_Type": "C" },
                    { "Subject_ID": "FCB M W08", "Credit": "2", "Subject_Type": "W" },
                    { "Subject_ID": "FCB M W09", "Credit": "3", "Subject_Type": "W" }]
            },
            {
                "Student_RollNo": "MP16003", "Student_Course": "AMST", "MarkSheet": [
                    { "Subject_ID": "FCB M A03", "Credit": "7", "Subject_Type": "C" },
                    { "Subject_ID": "FCB M W08", "Credit": "4", "Subject_Type": "W" },
                    { "Subject_ID": "FCB M W09", "Credit": "3", "Subject_Type": "W" }]
            }]
    });
})();
＆＃13; 
<!doctype html>
<html>
<head>
    <title>Test</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.14/angular-filter.js"></script>
</head>
<body ng-app="ExampleApp">
    <div class='container-fluid' ng-controller="ExampleCtrl">

        <div ng-repeat="obj in jsondata" ng-init="cnt = 0">
            <strong style="color:#2b91af;">  Rollno: </strong> {{obj.Student_RollNo}}

            <table width="100%" ng-repeat="(key, value) in obj.MarkSheet | groupBy: 'Subject_Type'">
                <thead>
                    <tr>                        
                        <th width="20%"><b>SR. NO.</b></th>
                        <th width="40%"><b>CODE</b></th>
                        <th width="40%"><b>CREDITS</b></th>
                    </tr>
                </thead>
                <tr>
                    <td colspan="3"><strong style="color:#2b91af;"> {{ key=='W'?'Workshop':''}}</strong></td>
                </tr>
                <tr ng-repeat="obj1 in value">
                    <td width="20%">{{$index+1}}</td>
                    <td width="40%">{{obj1.Subject_ID}}</td>
                    <td width="40%">{{obj1.Credit}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

注意： - 重复表标题

答案 1 :(得分：0)

我最终得到了最简单的方法

＆＃13;
＆＃13; 
(function () {
    'use strict';

    var app = angular.module('ExampleApp', ['angular.filter']);

    app.controller('ExampleCtrl', function ($scope, $http) {
 $scope.CheckExit = function (jsondata,type) {  return jsondata.some(function (obj) { return obj.Subject_Type === type }); }
   
        $scope.jsondata = [
            {
                "Student_RollNo": "MP16002", "Student_Course": "AMST", "MarkSheet": [
                    { "Subject_ID": "FCB C A03", "Credit": "5", "Subject_Type": "C" },
                    { "Subject_ID": "FCB M W08", "Credit": "2", "Subject_Type": "W" },
                    { "Subject_ID": "FCB M W09", "Credit": "3", "Subject_Type": "W" }]
            },
            {
                "Student_RollNo": "MP16003", "Student_Course": "AMST", "MarkSheet": [
                    { "Subject_ID": "FCB M A03", "Credit": "7", "Subject_Type": "C" },
                    { "Subject_ID": "FCB M W08", "Credit": "4", "Subject_Type": "W" },
                    { "Subject_ID": "FCB M W09", "Credit": "3", "Subject_Type": "W" }]
            }]
    });
})();
＆＃13; 
<!doctype html>
<html>
<head>
    <title>Test</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.14/angular-filter.js"></script>
</head>
<body ng-app="ExampleApp">
    <div class='container-fluid' ng-controller="ExampleCtrl">

        <div ng-repeat="obj in jsondata" ng-init="cnt = 0">
          <br/><br/>  
          <strong style="color:#2b91af;">  Rollno: </strong> {{obj.Student_RollNo}}

            <table width="100%" >
                <thead>
                    <tr>                        
                        <th width="20%"><b>SR. NO.</b></th>
                        <th width="40%"><b>CODE</b></th>
                        <th width="40%"><b>CREDITS</b></th>
                    </tr>
                </thead>
               
                <tr ng-repeat="obj1 in obj.MarkSheet" ng-if="obj1.Subject_Type==='C'">
                    <td width="20%">{{$index+1}}</td>
                    <td width="40%">                                    {{obj1.Subject_ID}}</td>
                    <td width="40%">{{obj1.Credit}}</td>
                </tr>
               <tr ng-if="CheckExit(obj.MarkSheet,'W')"><td align="left" valign="top" colspan="3">&nbsp;&nbsp;<b> WORKSHOPS</b></td><td align="center" valign="top"></td><td align="center" valign="top"></td></tr>
                              
              <tr ng-repeat="obj1 in obj.MarkSheet" ng-if="obj1.Subject_Type==='W'">
                    <td width="20%">{{$index+1}}</td>
                    <td width="40%">                                    {{obj1.Subject_ID}}</td>
                    <td width="40%">{{obj1.Credit}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题