CODEWITHSUNDEEP
angularjs
Sandy
Sandy

Reputation: 17

Readonly is not working in AngularJs

Inside my HTML file:

<rating ng-show = "onerate =='null'" readonly="isReadOnly" ng-model="newRate.rating" max="max" class="assertive" ng-click="addRating('{{singleRecipe[0].recipe_id}}')" >
</rating>

I want that whenever I click once it will never be clickable.

Inside my controller in my Javascript file:

$scope.rate = 1;
$scope.max = 5;
$scope.isReadonly = false;
$scope.newRate = {};
$scope.newRate.userID = $scope.userdata.user_id;
$scope.addRating = function(recipe_id){
   $scope.newRate.recipeID = recipe_id;
   RatingList.add($scope.newRate);
   console.log($scope.newRate);
   $scope.isReadonly = true;
}

Upvotes: 0

Views: 91

Answers (2)

JanR
JanR

Reputation: 6132

You should use ng-readonly docs here

Keep in mind that readonly attribute only works for input objects, if you are creating some element that responds to click, you will have to handle this differently.

What you really want is to change your click method:

$scope.addRating = function(recipe_id){
  if (!$scope.isReadonly)
  {
    $scope.newRate.recipeID = recipe_id;
    RatingList.add($scope.newRate);
    console.log($scope.newRate);
    $scope.isReadonly = true;
  }
}

You use ng-class with $scope.isReadonly to dynamically add classes to visually show that the element is no longer clickable if you wanted to. More info here

Upvotes: 1

Hardy
Hardy

Reputation: 5631

Use ng-readonly

https://docs.angularjs.org/api/ng/directive/ngReadonly

You now have only readonly

Upvotes: 0

Related Questions