Question

将布尔值传递给文本时遇到了一个奇怪的问题。这是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";
}

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

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

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

AngularJS：只读输入ng-readonly

2 个答案: