Angular ng-repeat 和 ng-class 的模板指令
Angular Template directive for ng-repeat and ng-class
我正在尝试获取元素模板中的代码:
rent.html
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
controller.js
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
});
overview.html
<tr kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
</tr>
我不知道如何处理 overview.html 中的其余部分。
我终于想要一个<kfz-rent></kfz-rent>
。
谢谢!
这应该有效:
<kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
</kfz-rent>
ng-repeat 的代码似乎没问题。但是您必须在控制器中创建数组:
$scope.rents = [];
不要忘记为您的控制器创建别名
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
},
controllerAs: 'rentController'
};
});
干杯,
瓦伦丁
我正在尝试获取元素模板中的代码:
rent.html
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
controller.js
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
});
overview.html
<tr kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
</tr>
我不知道如何处理 overview.html 中的其余部分。
我终于想要一个<kfz-rent></kfz-rent>
。
谢谢!
这应该有效:
<kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
</kfz-rent>
ng-repeat 的代码似乎没问题。但是您必须在控制器中创建数组:
$scope.rents = [];
不要忘记为您的控制器创建别名
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
},
controllerAs: 'rentController'
};
});
干杯,
瓦伦丁