AngularJS: только для чтения с ng-readonly

У меня есть странная проблема с передачей логического текста. Вот 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";
}

Может кто-нибудь объяснить мне, почему второе поле по-прежнему может быть изменено?

Ответ 1

Вам нужно передать свой объем в ng-readonly без брекетов. И $scope.truefalse не должен быть строкой, поэтому вам не нужны кавычки.

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

Ответ 2

когда мы когда-либо используем внутренний элемент модели, например, как атрибут, не нужно использовать фигурные скобки, но какой бы код не работал в вашем случае, он отлично работает для меня ниже, это рабочий код

<!DOCTYPE html>
<html ng-app="convertApp">
<head>       
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <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>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script>
                        var app = angular.module('convertApp', []);
                        app.controller('MainCtrl', function ($scope) {
                            $scope.first = "Angular";
                            $scope.second = "JS";
                            $scope.truefalse = "true";
                        });
    </script>   
</body>