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 - 類不適用於該元素，而點擊複選框

回答

相關問題