AngularJS-概念理解视图问题(ng-if，ng-switch)

Question

我是一个处理AngularJS和JavaScript的新手，我希望今天能从您的建议中受益。我在显示带有/不带有"只读"属性的输入块时遇到问题。创建了一个JSFiddle来更好地解释我的问题，并发表了评论：https://jsfiddle.net/Eugene_Sa/s2tfvL8r/18/

简而言之，我有一个指令，用于检索用户拥有的权限。根据该指令，将为包含"privilege"属性的DOM元素分配或移除"readonly"状态。

该指令发送一个请求，检查输入字段中指示的权限是否存在，如果不存在，则删除DOM元素，否则显示。

输入字段如下所示：

<input type="text"
privilege='has-the-needed-privilege'
ng-model='vm.tender.view'
readonly
>  

现在我不得不承认，为了解决这个问题，我不能使用AngularJS的任何功能，比如ng if或ng switch。或者我脑子里可能有一个误解。我的问题是怎么可能做出这样的选择？提前感谢您的帮助。

Answer 1

您可以使用ngReadOnly或ngDisabled将input字段设为只读或禁用。这两个现有指令都接受计算结果为true或false的表达式。因此，如果ng-readonly="true"，则该字段为只读字段。

例如：

var myApp = angular.module('myApp', []);
myApp.controller('AppController', ['$scope', function($scope) {
$scope.vm = {
"tender": {
"view": "test"
}
};
$scope.toggleReadOnly = function() {
$scope.readOnly = !$scope.readOnly;
}
$scope.toggleDisabled = function() {
$scope.disabled = !$scope.disabled;
}
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppController">
<button type="button" ng-click="toggleReadOnly()">
Toggle Read Only
</button>
<button type="button" ng-click="toggleDisabled()">
Toggle Disabled
</button>
<input type="text" ng-model='vm.tender.view' ng-readonly="readOnly" ng-disabled="disabled">
</div>

如果该字段是只读的，它看起来仍然像一个普通的文本输入字段，只是无法更改其值。如果它被禁用，它将显示为灰色。

这可能会消除对自定义指令的需要。您可以检索privilege的值，并将其用作ng-readonly或ng-disabled的表达式。换句话说，您可以将ng-readonly或ng-disabled设置为privilege。