2016-03-05 84 views
0

的html代码:NG重复

<head> 

     <title>Angular Accordion</title> 
     <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="dcrlistingHosted.js"></script> 




    </head> 
    <body ng-app="myApp" ng-controller="dcrlistingCtrl">   

      <div class="container-fluid"> 
       <div class="row"> 
       <div class="col-sm-4 hidden-xs" > 

        <ul class="list-group text-center" style="cursor:pointer; border-bottom:6px solid #3184a1"> 
          <li class="list-group-item contactHeader" style="cursor:default; background-color:#3184a1; color:white;">{{contact}}</li> 
          <div style="cursor:pointer;" ng-repeat="con in contacts" class="text-center"> 

           <div ng-click="toggleGroup(con)" 
           ng-class="{active: isGroupShown(con)}" class="list-group-item" style="background-color:#28aadc; border-bottom:1px solid white; border-top:1px solid white; color:white;"> 

             {{con.patch}}<span class="badge">{{con.contact.length}}</span> 

           </div> 
          <div > 

            <div ng-repeat="cell in con.contact" ng-show="isGroupShown(con)" class="panel-collapse cell list-group-item" style="background-color:grey; color:white;" ng-click="transferEachContact('contacts','tableArray',cell.id)"> 
             {{cell.name}} 
            </div> 
          </div> 
        </div>    
         </ul>  


       </div> 

       <div class="col-sm-8"> 

        <div class="col-sm-12 hidden-xs toggleArea"> 
          <button type="button" class="btn btn-primary " ng-click="doctors()"><b>Doctor</b></button> 
          <button type="button" class="btn btn-primary " ng-click="pharmacists()" ><b>Pharmacist</b></button> 
          <button type="button" class="btn btn-primary " ng-click="stockists()" ><b>Stockist</b></button> 
          <div style="display:inline; float:right;"> 
           <input autocomplete="off" type="text" maxlength="50" placeholder="Search Doctor" min-length="4" typeahead-editable="false"> 
           <button type="button" class="btn btn-info glyphicon glyphicon-search"><b>Search</b></button> 
          </div> 
        </div> 

       <div class="col-lg-12"> 

     <div id="no-more-tables" class="doctors">   
       <table class="table table-striped table-bordered table-hover table-condensed cf"> 
         <thead class="text-center cf" style="background-color:#3184a1; color:white;" > 
         <tr> 
         <th>Name</th> 
         <th class="hidden-xs">Speciality</th> 
         <th class="hidden-xs">class</th> 
         <th>patch</th> 
         <th class="hidden-xs">type</th> 
         <th>Edit</th> 
         <th>Delete</th></tr> 
        </thead> 
        <tbody data-link="row" class="rowlink"> 

        <div class="contacts" ng-repeat="delt in delitems" > 
        <tr ng-repeat=" del in delt.contact" ng-click="transferEachContact('tableArray','contacts',del.id)"> 
         <td>{{del.name}}</td> 
         <td class="hidden-xs">{{del.Speciality}}</td> 
         <td class="rowlink-skip hidden-xs">{{del.class}}</td> 
         <td data-title="patch:">{{del.patch}}</td> 
         <td class="hidden-xs">{{del.type}}</td> 
         <td data-title="Edit:"><span class="glyphicon glyphicon-plus"></span></td> 
         <td data-title="Delete:"><span class="glyphicon glyphicon-remove"></span></td> 
         </tr> 
        </tr> 

       </tbody> 
      </table> 

      <div ng-repeat="delitems in tableArray" > 
     patch:{{delitems.patch}} 
     <hr> 
     <div ng-repeat="del in delitems.contact"> 
      <p ng-click="transferEachContact('tableArray','contacts',del.id)" ng-show="del.name.length"> name:{{del.name}}</p> 
     </div> 
     <hr> 
     <hr> 
     </div> 

      </div> 
       </div> 
       </div> 
      </div> 

    </body> 

角的js代码:

var appModule =angular.module("myApp", []); 

    appModule.controller("dcrlistingCtrl", function($scope) { 


     $scope.toggleGroup = function(group) { 
     if ($scope.isGroupShown(group)) { 
      $scope.shownGroup = null; 
     } else { 
      $scope.shownGroup = group; 
     } 
     }; 

     $scope.isGroupShown = function(group) { 
     return $scope.shownGroup === group; 
     }; 

     $scope.contact="Doctors"; 


    $scope.contacts= 
    [ 
    { "patch":"BARIJPUR", 
      "contact": 
       [ 
        {"id":"1","patch":"BARIJPUR","name":"RAMA SENA","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"2","patch":"BARIJPUR","name":"SMRITI IRANI","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"3","patch":"BARIJPUR","name":"JAGDISH NAIR","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     }, 

     { 
      "patch":"RATANGHAR", 
      "contact": 
       [ 
        {"id":"4","patch":"RATANGHAR","name":"ASHISH NAIK","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"5","patch":"RATANGHAR","name":"SMRITI IRANI","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"6","patch":"RATANGHAR","name":"SAIRAJ NAIK","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     }, 

     { 
      "patch":"BHIRJ", 
      "contact": 
       [ 
        {"id":"7","patch":"BHIRJ","name":"RATAN PANDEY","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"8","patch":"BHIRJ","name":"RAMAN SHIVOLKAR","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     } 
    ]; 


     $scope.doctors = function() { 
      $scope.contact="Doctors"; 

      $scope.contacts=[]; 

    $scope.contacts= 
    [ 
    { "patch":"BARIJPUR", 
      "contact": 
       [ 
        {"id":"1","patch":"BARIJPUR","name":"RAMA SENA","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"2","patch":"BARIJPUR","name":"SMRITI IRANI","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"3","patch":"BARIJPUR","name":"JAGDISH NAIR","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     }, 

     { 
      "patch":"RATANGHAR", 
      "contact": 
       [ 
        {"id":"4","patch":"RATANGHAR","name":"ASHISH NAIK","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"5","patch":"RATANGHAR","name":"SMRITI IRANI","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"6","patch":"RATANGHAR","name":"SAIRAJ NAIK","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     }, 

     { 
      "patch":"BHIRJ", 
      "contact": 
       [ 
        {"id":"7","patch":"BHIRJ","name":"RATAN PANDEY","Speciality":"consulting physician","class":"gold","type":"doctor"}, 
        {"id":"8","patch":"BHIRJ","name":"RAMAN SHIVOLKAR","Speciality":"consulting physician","class":"gold","type":"doctor"} 
       ] 
     } 
    ]; 

     }; 

     $scope.pharmacists = function() { 
      $scope.contact="pharmacists"; 

      $scope.contacts=[]; 

        $scope.contacts= 
    [ 
     {"patch":"DRAMAPUR","id":"4", "contact":["RYAN DCOSTA", "SIDDESH NAIK","ARVIND CHARI"]}, 
     {"patch":"MAHALSA", "id":"5" ,"contact":["TANVI REDKAR", "PRIYANKA BANDODKAR", "GIRISH MATARBHOG"]} 
    ]; 
     }; 

     $scope.stockists = function() { 
      $scope.contact="stockists"; 

      $scope.contacts=[]; 

       $scope.contacts= 
    [ 
     {"patch":"SRIJAN","id":"6", "contact":["SHILPA NAIK", "ARBAAZ SHAIK","NAZEEF SHAIK"]}, 
     {"patch":"KHANCHAR","id":"7", "contact":["AVESH NAIK", "MELROY FERNANDES", "BRIAN DIAS"]}, 
     {"patch":"TRINSAL","id":"8","contact":["MEENAKSHI TIWARI", "GAURAV TIWARI"]} 
    ]; 

     }; 

    //following function takes parameter of a existing function and makes a call to it (variable value as a function name can be archieved with the following //function) 
    $scope.callFunction = function (name){ 
      if(angular.isFunction($scope[name])) 
       $scope[name](); 
       alert(name); 
     }; 

    $scope.tableArray= 
    [ 
     {"patch":"BARIJPUR", 
     "contact":[] 
     }, 

     {"patch":"BHIRJ", 
     "contact":[] 
    }, 

    {"patch":"RATANGHAR", 
     "contact":[] 
    } 
    ]; 

    //delete whole object which is inside an object and append to respective patch in array 
    $scope.transferEachContact= function(sourceArray,destArray,contactId) 
    { 
      //following for loop is to track each object inside array (depth=array[i]) 
      for (i = 0; i < $scope.$eval(sourceArray).length; i++) 
      { 
       //following for loop is to track each object one more step inside array (depth=array[i].array[j]) 
       for(j = 0; j < $scope.$eval(sourceArray)[i].contact.length; j++) 
       { 
        //checking is done on id which is unique! if id's match than that object is shifted to destination array under respective patch! 
        if ($scope.$eval(sourceArray)[i].contact[j].id && $scope.$eval(sourceArray)[i].contact[j].id === contactId) 
        { 
         //following loop is on the destination array (depth=array[k]) 
         for(k = 0; k < $scope.$eval(destArray).length; k++) 
         { 
          //following checks where source array patch and dest array patch match and puts that object under the respective patch, ERADICATS NEED FOR RESPECTIVE ORDERED STORING OF PATCH IN ORDER IN DESTINATION ARRAY 
          if($scope.$eval(sourceArray)[i].patch == $scope.$eval(destArray)[k].patch) 
           { 
            [].push.apply($scope.$eval(destArray)[k].contact, $scope.$eval(sourceArray)[i].contact.splice(j, 1));      
            break; 
           } 
         }  
        } 
       } 
      }  
    }; 


     }); 

的问题是,在<tr>的NG-重复是没有发生! output

+0

也许,您需要使用'ng-repeat'而不是'ng-click'?像这样'ng-repeat =“del delt.contact”ng-click =“transferEachContact('tableArray','contacts',del.id)”'而不是'ng-click =“del in delt.contact”ng -Click = “transferEachContact( 'tableArray', '联系人',del.id)”'。 –

+0

opps错误我使用ng-click.i将编辑代码....但仍然没有displayd在桌子上! –

+0

你确定数组'delt.contact'在调用单击后不为空吗? –

回答

2

这里是代码:当我点击并从医生阵列传送数据到tableArray

以下为输出的图像没有数据示 名称 专业 类 补丁 编辑 删除

     <tbody data-link="row" class="rowlink" ng-repeat="delitems in tableArray" ng-show="delitems.patch.length"> 


         <tr ng-repeat=" del in delitems.contact" ng-show="del.name.length"> 

          <div > 
          <td>{{del.name}}</td> 
          <td class="hidden-xs">{{del.Speciality}}</td> 
          <td class="hidden-xs">{{del.class}}</td> 
          <td data-title="patch:">{{del.patch}}</td> 
          <td class="hidden-xs">{{del.type}}</td> 
          <td data-title="Edit:"><span class="glyphicon glyphicon-plus"></span></td> 
          <td data-title="Delete:" ><span class="glyphicon glyphicon-remove" ng-click="transferEachContact('tableArray','contacts',del.id)"></span></td> 
          </div> 

        </tr> 


        </tbody> 
       </table> 

我错误的做法是在错误的标签中使用ng-repeat!加上我可以在标签上使用ng-repeat

+0

我该怎么做? –

+0

你的意思是你还没有解决? – Thanigainathan

+0

我的意思是我如何将它标记为已回答? –