2016-04-28 16 views
3

ボタンに含まれる角度タブで作業しています。何らかの理由でselect関数が押されても呼び出されていない。だから私は問題がhtmlになければならないと思う。私は、問題がどこにある可能性があるのか​​、両方のコードセットを提供しました。呼び出されたときに角度のクリック機能が入力されない

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でNGをクリックしますボタンの代わりに – Manish

+0

が正しいコントローラの下にありますか? – ochi

+0

コピーをliに貼り付け、古いものか違うものを削除することを意味しますか? NG-コントローラ= "navCtrlなどからNavController" .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 plsが今すぐコードを実行 – byteC0de

+0

私はこれを実装する方法を理解します。ありがとうございます。 –

関連する問題