在我的尝试中,我使用模型中的类名作为选中,我分配了ng-class="car.selected"
,但它不起作用。
这里是html和js代码:
<!DOCTYPE html>
<html ng-app="parking">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Car Parking</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
button:disabled {
border: 1px solid red;
}
.selected {
background-color: #FAFAD2;
}
</style>
<script src="js/angular.js"></script>
<script>
var myApp = angular.module("parking", []);
myApp.controller('parkingCtrl', ['$scope', function($scope){
$scope.title = "[Packt] Parking";
$scope.cars = [];
$scope.park = function (car) {
car.entrance = new Date();
$scope.cars.push(car);
delete $scope.car
}
}]);
</script>
</head>
<body ng-controller="parkingCtrl">
<div class="container">
<h3 ng-bind="title"></h3>
<table class="table">
<thead>
<tr>
<th>Serial No.</th>
<th></th>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars" ng-class="{selected: car.selected}"> //not works!
<td>{{$index+1}}</td>
<td><input type="checkbox" ngmodel="car.selected"/></td>
<td> <span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
<input type="text" ng-model="car.plate" placeholder="What's the Plate?">
<button ng-click="park(car)" ng-disabled="!car.plate">Park</button>
</div>
</body>
任何人都弄清楚我在这里做错了吗?
答案 0 :(得分:4)
ng-model
不是ngmodel
所以
<input type="checkbox" ng-model="car.selected "/>
所以
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "[Packt] Parking";
$scope.cars = [];
$scope.park = function(car) {
car.entrance = new Date();
$scope.cars.push(car);
delete $scope.car;
};
});
.selected {
background-color: #FAFAD2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="parking">
<div ng-controller="parkingCtrl">
<div class="container">
<h3 ng-bind="title"></h3>
<table class="table">
<thead>
<tr>
<th>Serial No.</th>
<th></th>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars" ng-class="{selected: car.selected}">
<td>{{$index+1}}</td>
<td>
<input type="checkbox" ng-model="car.selected " />
</td>
<td> <span ng-bind="car.plate "></span>
</td>
<td><span ng-bind="car.entrance "></span>
</td>
</tr>
</tbody>
</table>
<input type="text " ng-model="car.plate " placeholder="What 's the Plate?" />
<button ng-click="park(car)" ng-disabled="!car.plate">Park</button>
</div>
</div>
</div>