我想在网页中从一个控件导航到另一个控件。请在下面找到示例代码。当用户点击页面上的任何组件时,他应该导航到其他控制器。
示例代码:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller("TabsParentController", function($scope) {
var setAllInactive = function() {
angular.forEach($scope.workspaces, function(workspace) {
workspace.active = false;
});
};
$scope.workspaces = [{
id: 1,
name: "Tab1",
active: true
}, {
id: 2,
name: "Tab2",
active: false
}, {
id: 3,
name: "Tab3",
active: false
}];
$scope.addWorkspace = function() {
setAllInactive();
};
});
app.controller("TabsChildController", function($scope, $log) {});
function goToNextTab() {
alert("click");
}
Html代码:
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
Tab Name: <input type="text" ng-model="workspace.name"/>
</div>
<input type="button" name="clickMe" value="clickMe" onclick="goToNextTab()" class="nexttab"/>
</tab>
</tabset>
</div>
答案 0 :(得分:1)
你必须将你的功能传递到范围并操纵它以适合你的逻辑,尝试类似:
在HTML中
<!-- we are passing the object to the click function-->
<input type="button" name="clickMe" value="clickMe" ng-click="goToNextTab(workspace)" class="nexttab"/>
在JS中
$scope.goToNextTab = function(getTab){
// according to you post we want to go to next tab and if we are in last tab we ant to go to first
// remember this can be any logic
var goTo = getTab.id===3 ? 1: getTab.id+1;
// setting the tab active attribute to true
var newState = $scope.workspaces.map(function(item){ item.active = item.id===goTo ? true : false; return item;});
// assigning new vales to workspace scope
console.log(newState); $scope.workspaces = newState;
};
答案 1 :(得分:0)
首先,您需要将list.extend()
函数放在角度范围内,然后获取当前活动工作空间索引并递增它。因此,将下一个工作区更改为活动;
goToNextTab
在按钮中将$scope.goToNextTab = function() {
var index = 0;
for (; index < $scope.workspaces.length; index++) {
if ($scope.workspaces[index].active) {
$scope.workspaces[index].active = false;
break;
}
}
index++;
if (index >= $scope.workspaces.length) {
index = 0;
}
$scope.workspaces[index].active = true;
}
更改为onclick
。
Plunker更新:http://plnkr.co/edit/pYtwQXfTVEufxr2nqzWx?p=preview