调用时未输入角度 ng 单击函数

Angular ng-click function not being entered when called

本文关键字：ng 单击 函数 未输 输入 调用      更新时间：2023-09-26

我正在研究按钮中包含的一些 Angular 选项卡。由于某种原因，选择 函数在按下时不会被调用。所以我认为问题必须在 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";
            }
        };

它已经是工人了

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>

相关文章：