A, B, C의 세 가지 버튼이 있습니다. 지금은 내 버튼이 OK이며 처음 클릭했을 때 활성화 된 것으로 표시되었습니다. 하지만 같은 버튼을 두 번째로 클릭했을 때 비활성 버튼이 보이지 않았습니다. 이 전에, 나는도를 참조하고있어 이 ,하지만 아무것도 나를 도울 수 있습니다. 다음은 데모 이며 아래는 내 코드입니다.
HTML :
<button class="button button-primary" ng-model="button.a" ng-click="select(button.a)" ng-class="button.a.clicked?'button-dark':'button-stable'">
A
</button>
<button class="button button-primary" ng-model="button.b" ng-click="select(button.b)" ng-class="button.b.clicked?'button-dark':'button-stable'">
B
</button>
<button class="button button-primary" ng-model="button.c" ng-click="select(button.c)" ng-class="button.c.clicked?'button-dark':'button-stable'">
B
</button>
자바 스크립트 :
$scope.button = {};
$scope.button.a = {clicked: false}
$scope.button.b = {clicked: false}
$scope.button.c = {clicked: false}
$scope.select = function(button){
$scope.button.a.clicked = false;
$scope.button.b.clicked = false;
$scope.button.c.clicked = false;
button.clicked = true;
};
정말 도움이 필요합니다. 감사합니다.
아래 스 니펫을 참조하십시오. 선택한 버튼의 상태를 전환하는 것을 잊었습니다.
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
$scope.button = {};
$scope.button.a = {clicked: false}
$scope.button.b = {clicked: false}
$scope.button.c = {clicked: false}
$scope.select = function(button){
var clicked = button.clicked;
$scope.button.a.clicked = false;
$scope.button.b.clicked = false;
$scope.button.c.clicked = false;
button.clicked = !clicked;
};
});<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button.a" ng-click="select(button.a)" ng-class="button.a.clicked?'button-dark':'button-stable'">
A
</button>
<button class="button button-primary" ng-model="button.b" ng-click="select(button.b)" ng-class="button.b.clicked?'button-dark':'button-stable'">
B
</button>
<button class="button button-primary" ng-model="button.c" ng-click="select(button.c)" ng-class="button.c.clicked?'button-dark':'button-stable'">
B
</button>
</body>
</html>
</div>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다