두 개의 탭이있는 각도 js 부트 스트랩 모달 창이 있습니다. 바닥 글이 동일합니다. 활성 탭의 ID를 식별하고 제출 버튼 이벤트 핸들러로 보내려면 어떻게해야합니까?
<div class="modal-body">
<tabset justified="true">
<tab heading="One" id="one"></tab>
<tab heading="Two" id="two"></tab>
</tabset>
</div>
<div class="modal-footer">
<button ng-click="doSomething(activeTabId)">Submit</button>
</div>
ng-click사용 select()하는 대신 angular-bootstrap문서가 tab선택에 사용 하는 것을 사용할 수 있습니다 . 고려해야 할 또 다른 참고 사항은 tabset지시문과 tab지시문이 격리 된 범위를 생성하므로 activeId격리 된 지시문 내에서 액세스 할 수 있도록 범위 내의 개체 에을 할당해야한다는 것입니다.
참고 : 다음 은 범위에 대한 FAQ 입니다.
HTML
<body ng-controller="MyTabController">
<tabset justified="true">
<tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
<tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
</tabset>
</body>
자바 스크립트
.controller('MyTabController', function($scope, $window) {
// store tab related data in a scope object
// to avoid problems with isolated scopes
$scope.tab = {};
});
데모
angular.module('app', ['ui.bootstrap'])
.controller('MyTabController', function($scope, $window) {
$scope.tab = {};
$scope.submit = function(activeId) {
$window.alert(activeId);
};
});<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script data-require="angular-bootstrap@*" data-semver="0.13.3" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyTabController">
<tabset justified="true">
<tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
<tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
</tabset>
<hr> active id: {{ tab.activeTabId }}
<hr>
<br>
<button type="button" ng-click="submit(tab.activeTabId)" class="btn btn-primary btn-block btn-lg">
Alert Active Id
</button>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다