ng-repeat和ng-class的Angular Template指令

时间:2015-02-18 19:34:18

标签: javascript html angularjs templates directive

我试图在元素模板中获取代码:

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>

谢谢!

1 个答案:

答案 0 :(得分:1)

这应该有效:

 <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'
 };
});

干杯,

的Valentin