Angularjs - 类不适用于该元素，而点击复选框

在我的尝试中，我使用从模型中选择的类名称，我分配了ng-class="car.selected"但它不起作用。Angularjs - 类不适用于该元素，而点击复选框

这里是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>

Live Demo

任何一个数字时的错误我在这里做吗？

来源

2014-12-11 3gwebtrain

这是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>

来源

2014-12-11 05:36:58

是的，你是正确的。但我没有得到任何错误，这是问题所在。有没有办法来捕捉这类问题？ – 3gwebtrain 2014-12-11 05:42:27

使用ng-hint库，它会在控制台上发出这样的问题警告 – harishr 2014-12-11 06:12:04

Angularjs - 类不适用于该元素，而点击复选框

回答

相关问题