2016-04-28 62 views
3

我正在處理按鈕中包含的一些Angular選項卡。由於某些原因,select函數在被按下時沒有被調用。所以我認爲這個問題必須在html中。我在問題可能出現的地方提供了兩套代碼。調用時不會輸入角度ng-click函數

HTML代碼

<ul> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(1)}"> 
       <button class="btn-lg btn-primary" ng-click="select(1)" aria-controls="home" role="tab">Home</button> 
      </li> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(2)}"> 
       <button class="btn-lg btn-primary" ng-click="select(2)" aria-controls="savings options" role="tab">Savings Options</button> 
      </li> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(3)}"> 
       <button class="btn-lg btn-primary" ng-click="select(3)" aria-controls="checking option" role="tab">Checking Options</button> 
      </li> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(4)}"> 
       <button class="btn-lg btn-primary" ng-click="select(4)" aria-controls="credit cards" role="tab">Credit Cards</button> 
      </li> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(5)}"> 
       <button class="btn-lg btn-primary" ng-click="select(5)" aria-controls="loans" role="tab">Loans</button> 
      </li> 
      <li class="navigation-button" role="presentation" ng-class="{active:isSelected(6)}"> 
       <button class="btn-lg btn-primary" ng-click="select(6)" aria-controls="sign in" role="tab">Sign In</button> 
      </li> 
     </ul> 

角功能

$scope.select = function(setTab) { 
      $scope.tab = setTab; 
      if (setTab === 2) { 
       $scope.filtText = "Savings"; 
      } 
      else if (setTab === 3) { 
       $scope.filtText = "Checking"; 
      } 
      else if (setTab === 4) { 
       $scope.filtText = "Credit"; 
      } 
      else if (setTab === 5) { 
       $scope.filtText = "Loan"; 
      } 
      else if (setTab === 6) { 
       $scope.filtText = "Sign"; 
      } 
      else { 
       $scope.filtText = "Bank"; 
      } 
     }; 
+0

嘗試用012納克點擊元素而不是按鈕.. – Manish

+0

正確的控制器下? – ochi

+0

你的意思是複製粘貼到李並刪除舊的或不同的東西? 納克控制器= 「navController作爲navCtrl」 .controller( 'navController',[ '$範圍',函數($範圍){ –

回答

2

它已經工作的人

var app = angular.module("mainApp", []); 
 

 
app.controller('mainCtrl', function($scope){ 
 
    $scope.select = function(setTab) { 
 
      alert("selected"); 
 
      $scope.tab = setTab; 
 
      if (setTab === 2) { 
 
       $scope.filtText = "Savings"; 
 
      } 
 
      else if (setTab === 3) { 
 
       $scope.filtText = "Checking"; 
 
      } 
 
      else if (setTab === 4) { 
 
       $scope.filtText = "Credit"; 
 
      } 
 
      else if (setTab === 5) { 
 
       $scope.filtText = "Loan"; 
 
      } 
 
      else if (setTab === 6) { 
 
       $scope.filtText = "Sign"; 
 
      } 
 
      else { 
 
       $scope.filtText = "Bank"; 
 
      } 
 
     }; 
 
});
.active{ 
 
    color:red; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="mainApp" ng-controller="mainCtrl"> 
 
    <ul> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 1}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(1)" aria-controls="home" role="tab">Home</button> 
 
      </li> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 2}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(2)" aria-controls="savings options" role="tab">Savings Options</button> 
 
      </li> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 3}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(3)" aria-controls="checking option" role="tab">Checking Options</button> 
 
      </li> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 4}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(4)" aria-controls="credit cards" role="tab">Credit Cards</button> 
 
      </li> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 5}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(5)" aria-controls="loans" role="tab">Loans</button> 
 
      </li> 
 
      <li class="navigation-button" role="presentation" ng-class="{'active':tab == 6}"> 
 
       <button class="btn-lg btn-primary" ng-click="select(6)" aria-controls="sign in" role="tab">Sign In</button> 
 
      </li> 
 
     </ul> 
 
</div>

+0

按鈕被激活,但我不認爲選擇函數是被輸入 –

+0

@ZackLucky請現在運行代碼 – byteC0de

+0

我站好了,我會弄清楚如何實現這個,謝謝! –