CODEWITHSUNDEEP
jqueryangularjs
3gwebtrain
3gwebtrain

Reputation: 15303

Angularjs - class not apply to the element, while check box clicked

In my try, I am using the class name from the model as selected, i assigned the ng-class="car.selected" but it doesn't works.

here is html and js code :

<!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

Any one figure-out the wrong what i do here please?

Upvotes: 0

Views: 55

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It is ng-model not ngmodel so

<input type="checkbox" ng-model="car.selected "/>

So

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>

Upvotes: 4

Related Questions