Question

我是接触AngularJS和JavaScript的新手，我希望今天我能从您身边得到建议。我有没有“只读”属性显示与/输入块的问题。创建了一个JSFiddle，以更好地解释我的问题，并带有注释：https://jsfiddle.net/Eugene_Sa/s2tfvL8r/18/

简而言之，我有一条指令可以检索用户拥有的特权。根据该指令，将为包含“特权”属性的DOM元素分配或删除“只读”状态。

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

输入字段如下：

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

现在我不得不承认我无法使用ng-if或ng-switch之类的AngularJS功能来解决此问题。或者有可能是在我的脑海一种误解。我的问题是如何进行这样的选择？预先感谢您的帮助。

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。

AngularJS-概念理解视图问题（ng-if，ng-switch）

1 个答案: