Question

我想在网页中从一个控件导航到另一个控件。请在下面找到示例代码。当用户点击页面上的任何组件时，他应该导航到其他控制器。

示例代码：

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>

Answer 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;

            };

工作人员： http://plnkr.co/edit/cHKyMSKnN1wRRKFxsOPa?p=preview

Answer 2

首先，您需要将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

导航到网页的其他部分

2 个答案: