行跨度和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"} ]}]

代碼中使用NG-重複設定關鍵詞行跨度和angularjs

 <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

全部隱藏行請指導我

感謝提前出現問題

來源

2016-12-07 Pravin

我得到了最簡單的方法終於

(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" }] 
 
      }] 
 
    }); 
 
})();

<!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>

來源

2016-12-09 11:12:54 Pravin

請檢查下面的代碼片段

(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" }] 
 
      }] 
 
    }); 
 
})();

<!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>

注： - 重複表格標題

來源

2016-12-07 15:57:05

行跨度和angularjs

回答

相關問題