AngularJS - концепция понимания представлений (ng-if, ng-switch)

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
>  

Теперь я должен признать, что не мог использовать ни одну из функций 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.