javascript - 调用时未输入 Angular ng-click 函数

Question

我正在处理包含在按钮中的一些 Angular 选项卡。出于某种原因，选择功能在按下时不会被调用。所以我认为问题必须在 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>

Angular 函数

 $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";
            }
        };

Answer 1

已经开始工作了

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>