CODEWITHSUNDEEP
javascriptangularjsjsp
aaaaaaaa1
aaaaaaaa1

Reputation: 51

Angularjs data-ng-click wont work a second time...how?

JSP page

 <form>
   <table class="countrys" data-name="tableCountry">
    <tr bgcolor="lightgrey">
     <th>Country ID</th>
     <th>Country Name</th>
    </tr>
    <tr data-ng-repeat="c in allCountrys"
     data-ng-click="selectedCountry(c, $index);"
     data-ng-class="getSelectedClass(c);">
     <td>{{c.countryId}}</td>
     <td>{{c.countryName}}</td>
    </tr>
   </table>
 </form>

controller

$scope.selectedCountry = function(country, index){
angular.forEach($scope.allCountrys,function(value, key) {
      if (value.countryId == country.countryId) {
       $scope.selectedCountry = country;
      }
 });

$scope.selectedRowCountry = index;
}


$scope.getSelectedClass = function(country) {

 if ($scope.selectedCountry.countryId != undefined) {
  if ($scope.selectedCountry.countryId == country.countryId) {
   return "selected";
  }
 }
 return "";
};

css

tr.selected {
   background-color: #aaaaaa;
}

there is this table on my page, once i press 1 row, it selects it, it changes the color, and it goes in both functions...

but once i click on another row, it wont go to the selectedCountry function, but only into the sgetSelectedClass function

i dont know why, i just wont to be able to select one row, then another one and so on...so that always just one row is selected

can u help me?

Upvotes: 1

Views: 41

Answers (1)

gaurav bhavsar
gaurav bhavsar

Reputation: 2043

you defined $scope.selectedCountry as a function, but at first time when you click on selectedCountry, you make $scope.selectedCountry as a object by calling $scope.selectedCountry = country; inside your ng-click function.

So remane your scope variable.

$scope.selectedCountry = function(country, index){
angular.forEach($scope.allCountrys,function(value, key) {
  if (value.countryId == country.countryId) {
   $scope.selectedCountry = country; // rename this scope variable
  }
});

Upvotes: 2

Related Questions