AngularJS按钮文本不起作用

AngularJS button text is not working

本文关键字：不起作用 文本 按钮 AngularJS      更新时间：2023-11-14

示例取自Apress手册。

MyAppModule.js

// Create the module
angular.module('myAppModule', []);
// configure the module with a controller
angular.module('myAppModule').controller('myProductDetailCtrl', function ($scope) {
        // Hide colors by default
        $scope.isHidden = true;
        // a function, placed into the scope, which
        // can toggle the value of the isHidden variable
        $scope.showHideColors = function () {
            $scope.isHidden = !$scope.isHidden;
        }
    }
);

我将其修改为：

// Create the module
var myAppModule = angular.module('myAppModule', []);
// configure the module with a controller
myAppModule.controller('myProductDetailCtrl', ['$scope',function ($scope) {
        // Hide colors by default
        $scope.isHidden = true;
        // a function, placed into the scope, which
        // can toggle the value of the isHidden variable
        $scope.showHideColors = function () {
            $scope.isHidden = !$scope.isHidden;
        }
    }
]);

我修改了这个product-detail.html文件

    <!DOCTYPE html >
<html ng-app="myAppModule">
<head>
    <title></title>
    <script src="js/angular.js"></script>
    <script src="js/myAppModule.js"></script>
    <style>
        body {
            font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
        }
        div {
            margin: 20px;
            padding: 20px;
            font-size: 16px;
            color:#ffffff;
        }
        #red {
            background-color: red;
        }
        #green {
            background-color: green;
        }
        #blue {
            background-color: blue;
        }
        #purple {
            background-color: purple;
        }
        #gray {
            background-color: gray;
        }
        #olive {
            background-color: olive;
        }
    </style>
</head>
<body ng-controller="myProductDetailCtrl">
<h2>AngularJS Socks</h2>
<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>
<button ng-click="showHideColors()" type="button">
    {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>
<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>
</body>
</html>

对此：（移动ng应用程序指令）

    <!DOCTYPE html >
<html >
<head>
    <title></title>
    <script src="js/angular.js"></script>
    <script src="js/myAppModule.js"></script>
    <style>
        body {
            font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
        }
        div {
            margin: 20px;
            padding: 20px;
            font-size: 16px;
            color:#ffffff;
        }
        #red {
            background-color: red;
        }
        #green {
            background-color: green;
        }
        #blue {
            background-color: blue;
        }
        #purple {
            background-color: purple;
        }
        #gray {
            background-color: gray;
        }
        #olive {
            background-color: olive;
        }
    </style>
</head>
<body ng-app="myAppModule"  ng-controller="myProductDetailCtrl">
<h2>AngularJS Socks</h2>
<p>Keep warm this winter with our 100% wool, 100% cool, AngularJS socks!</p>
<button ng-click="showHideColors()" type="button">
    {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
</button>
<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>
</body>
</html>

按钮标签/文本显示：

{{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}

按下它不会有任何作用。

您似乎有一个旧版本的AngularJS。

这是JSFiddle中的工作版本。

相关文章：