导航到网页的其他部分

时间:2016-12-08 20:23:47

标签: javascript html angularjs

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

示例代码:

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>

2 个答案:

答案 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;

            };

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

答案 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