AngularJS 전환 버튼
Angular에서 토글 버튼을 만들려고 합니다.지금까지 제가 아는 건
<div class="btn-group">
<a class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-show="!patient.archived">Archive patient</a>
<a class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-show="patient.archived">Unarchive patient</a>
.... some other buttons ....
</div>
기본적으로 두 개의 버튼을 가지고 전환함으로써 전환이 가능합니다.이 때문에 문제가 발생하고 있습니다.ng-hidea만 더하면 됩니다.display:none숨겼을 때 버튼에 맞춰 스타일링하는 게 너무 힘들어서요즘 스타일링에 문제가 있어요이상적으로는 텍스트, 클래스 및 함수 호출이 다음 상태에 따라 변경되는 ONE 버튼을 원합니다.patient.archived.
이를 달성하기 위한 깨끗한 방법은 무엇일까요?
를 사용하여 클래스 간을 전환하고 텍스트를 정규 Angular 식과 바인딩해야 합니다.또, 당신의 기능이toggleArchive값만 토글하고 Angular 식에서 값을 토글할 수 있습니다.
<a class="btn pull-right"
ng-class="{true: 'btn-primary', false: 'btn-danger'}[!patient.archived]"
ng-click="patient.archived = !patient.archived">
{{!patient.archived && 'Archive' || 'Unarchive'}} patient
</a>
다른 지친 여행자를 위해...
단순히 사용했을 수도 있습니다.ng-if.ng-iffalse일 경우 요소를 DOM에서 완전히 제외하므로 표시되지 않아도 스타일에 문제가 없습니다.또한 버튼의 텍스트만 변경할 수 있는 버튼 그룹은 실제로 필요하지 않습니다.
다음과 같은 경우:
<button class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-if="!patient.archived">Archive patient</button>
<button class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-if="patient.archived">Unarchive patient</button>
도움이 될 수 있습니다.
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app>
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
</html>
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
};
}
도움이 될 수 있습니다.
<!-- Include Bootstrap-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<!-- Code -->
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Click here to <strong>Toggle (show/hide)</strong> description</a>
<input type="checkbox" class="toggle-button"
ng-model="patient.archived">
그런 다음 체크박스를 버튼처럼 스타일링합니다.
전환으로 더 많은 작업을 수행해야 하는 경우 환자 클래스에 다음을 추가하십시오.
class Patient {
constructor() {
this.archived = false;
}
...
get angularArchived() {
return this.archived;
}
set angularArchived(value) {
if (value !== this.archived) {
toggleArchived(value);
}
this.archived = value;
}
}
그 후
<input type="checkbox" class="toggle-button"
ng-model="patient.angularArchived">
이것이 내가 찾은 가장 간단한 대답이다.빠른 셋업을 위해 사용하기 때문에 애니메이션으로 시도하지 않았습니다.
<a ng-click="scopeVar=scopeVar!=true">toggle</a>
<div ng-show="scopeVar">show stuff</div>
와 함께scopeVar=scopeVar!=true정의되지 않은 것이 true가 됩니다.
언급URL : https://stackoverflow.com/questions/16251977/angularjs-toggle-button
'programing' 카테고리의 다른 글
| SystemJS - 모멘트가 함수가 아님 (0) | 2023.03.14 |
|---|---|
| Tymeleaf에서 스프링 애플리케이션 환경 구현 (0) | 2023.03.14 |
| CSS SyntaxError, 예기치 않은 토큰 {}이(가) 표시됩니다.하지만 에러는 보이지 않는다. (0) | 2023.03.14 |
| 각도 2의 저장된 배열에서 항목 제거 (0) | 2023.03.14 |
| 소품 파괴 할당(반응/파괴-할당)을 사용해야 합니다. (0) | 2023.03.14 |