AngularJS ng-отключено не работает с элементами списка

я столкнулся с проблемой отключения элемента в списке.

<div id="searchdropdown">
    <ul>
        <li>list1</li>
        <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li>
        <li>list3</li>
    </ul>
</div>

не работает с ng-disabled.

Я также попытался с:

<li ng-class="disabled:someCondition" click="changeStatus()"> list2
</ li>

Он также не работает. Кто-нибудь может что-нибудь предложить?

8
angularjs disabled-control javascript list

4 ответов

Я предполагаю, что это какое-то окно поиска.

ngDisabled действительно используется для интерактивных элементов, а не элементов списка.

можно использовать ng-if или ng-hide удалить эти элементы из списка:

<li ng-if="!condition" ng-click="changeStatus()">item</li>
<li ng-hide="condition" ng-click="changeStatus()">item</li>

можно использовать ngClass чтобы применить определенный класс при отключении, чтобы он выглядел отключенным:

<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>

если вы хотите, чтобы элемент был виден, но не нажмите кнопку, возможно, вам придется сделать хак, как повторно открыть окно поиска, если элемент отключен или тонет событие.

9

Я думаю, вы хотите отключить onclick, если someCondition истинно. Это должно сработать:

<ul>
  <li>list1</li>
  <li  ng-click="someCondition || changeStatus()">list2</li>
  <li  >list3</li>
</ul>

поэтому, если someCondition истинно, он не будет выполнять changeStatus (), так как оператор OR не будет выполнять следующий оператор, когда предыдущий уже истинен.

11

кроме того, вы можете использовать следующее свойство CSS для отключения событий щелчка: 

li[disabled] {
    pointer-events: none;
}

то есть, если браузеры, на которые вы нацелены, поддерживают эту функцию. Вот список: http://caniuse.com/#feat=pointer-events

демо: 

angular.module('MyApp', [])

  .controller('MyCtrl', function($scope) {
    $scope.toggleActiveState = function(itemIndex) {
      $scope.items[itemIndex].isActive = !$scope.items[itemIndex].isActive;
    };
  
    $scope.items = [
      {label: 'One'},
      {label: 'Two'},
      {label: 'Three', isDisabled: true},
      {label: 'Four'}
    ];
  });
ul li.item {
  display: block;
  cursor: pointer;
  background: green;
  padding: 5px 10px;
  margin-bottom: 5px;
}

ul li.item.active {
  background: red;
}

ul li.item[disabled] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
<html ng-app="MyApp">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
<body ng-controller="MyCtrl">
  <h1>My list:</h1>
  <ul>
    <li class="item" ng-repeat="item in items" ng-click="toggleActiveState($index)" ng-disabled="item.isDisabled" ng-class="{active: item.isActive}">{{item.label}}</li>
  </ul>
</body>
</html>
4

этот код может помочь u.. 

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>
1