リスト内のアイテムを無効にする際に問題が発生しました。
<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>
また、機能しません。誰かが何かを提案できますか?
なんらかの検索ボックスだと思います。
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>
アイテムを表示したいがクリックできないようにしたい場合は、アイテムが無効になっている場合やイベントをシンクしている場合に検索ボックスを再度開くなどのハックを行う必要があります。
SomeConditionがtrueの場合、onclickを無効にしたいと思います。これはうまくいくはずです:
<ul>
<li>list1</li>
<li ng-click="someCondition || changeStatus()">list2</li>
<li >list3</li>
</ul>
したがって、someConditionがtrueの場合、ORステートメントは前のステートメントが既にtrueの場合は次のステートメントを実行しないため、changeStatus()は実行されません。
または、次の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>
このコードはあなたを助けることができます。
<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>