AngularJS：只读输入和ng-readonly

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

将布尔值传递给文本时有一个奇怪的问题。这是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?

有人可以解释为什么第二场仍然可以修改吗？

2 个解决方案

#1

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.

您需要在没有大括号的情况下以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

when ever we are using model inside element like as attribute no need use curly braces, but whatever code not working in your case it's working fine for me below is working code

当我们在像元素之类的元素中使用模型时，不需要使用花括号，但是在你的情况下无法正常工作的代码，下面的工作正常

<!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>

#1