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

использовать библиотеку ng-hint, она дает предупреждение на консоли для таких проблем – harishr

Angularjs - класс не применяется к элементу, а флажок установлен

ответ

Смежные вопросы