html代码:
<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>
angular js code:
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-repeat没有发生!单击并将数据从医生数组传输到tableArray
答案 0 :(得分:2)
这是代码: 名称 专业 类 补丁 类型 编辑 删除
<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