Readonly is not working in AngularJs

Question

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;
}

JanR · Accepted Answer · 2016-03-04 00:48:13Z

1

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

edited Mar 4, 2016 at 0:48

answered Mar 4, 2016 at 0:41

JanR

6,1303 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sandy Over a year ago

im my database its right... but i can still click rating

JanR Over a year ago

This depends on what the <rating> element is exactly, it seems there is more in the UI than you have shown in your code example. I would suggest creating a new question with all the information needed to get a good answer to your next problem

Sandy Over a year ago

Can you please add what should be written in my view

Sandy Over a year ago

<rating> is a plugin, its a star rating.

JanR Over a year ago

sorry i am not familiar with this plugin, however I am sure there is a way to disable the control, just use $scope.isReadonly as the boolean to disable it.

Hardy · Accepted Answer · 2016-03-04 00:42:19Z

0

Use ng-readonly

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

You now have only readonly

answered Mar 4, 2016 at 0:42

Hardy

5,6412 gold badges20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Readonly is not working in AngularJs

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related