Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: read only input with ng-readonly

I have a weird problem with passing a boolean to a text. Here is jsfiddle

<div ng-app ng-controller="MainCtrl">     <p>First Name:     <input ng-model="first" ng-readonly="true"/>     </p>     <p>Last Name:         <input ng-model="second" ng-readonly="{{truefalse}}"/>     </p> </div>  function MainCtrl($scope) {     $scope.first = "Angular";     $scope.second = "JS";     $scope.truefalse = "true"; } 

Can someone explain me why second field is still modifiable?

like image 640
anvarik Avatar asked Jan 03 '14 12:01

anvarik


People also ask

How to make input field readonly in AngularJS?

AngularJS ng-readonly DirectiveThe ng-readonly directive sets the readonly attribute of a form field (input or textarea). The form field will be readonly if the expression inside the ng-readonly attribute returns true. The ng-readonly directive is necessary to be able to shift the value between true and false .

How to make a textarea readonly in Angular?

You can make the TextBox as read-only by setting the readonly attribute to the input element.

How do you use NG disability?

Definition and UsageThe ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .


1 Answers

You need to pass your scope in ng-readonly without Braces. And $scope.truefalse shouldn't be a string, so you don't need quotes.

<div ng-app ng-controller="MainCtrl">     <p>First Name:     <input ng-model="first" ng-readonly="true"/>     </p>     <p>Last Name:         <input ng-model="second" ng-readonly="truefalse"/>     </p> </div>  function MainCtrl($scope) {     $scope.first = "Angular";     $scope.second = "JS";     $scope.truefalse = true; } 
like image 164
Tobino Avatar answered Sep 20 '22 14:09

Tobino