ng-class not working properly in 'AngularJs'

本文关键字：AngularJs in not working properly ng-class 更新时间：2024-06-05

在下面的程序中，当我在输入框中键入红色时，段落的背景必须变为红色。此外，为什么默认情况下我在段落中得到蓝色背景（它应该是透明的，因为模型在页面加载时有空值？有人能帮我吗？

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <style>
    .red{background:red;}
    .blue{background:blue;}
    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="color" />
    <p ng-class="{'red':color==red,'blue':color==blue}">This is a paragraph.</p>
<script>
    //1 module declaration
    var app = angular.module('myApp', []);
    //2 controller declaration
    app.controller('myCtrl',function($scope){
        //code here
    });
</script> 
</body> 
</html>

您没有在任何地方定义任何变量red或blue，因此它们的值计算为undefined，这与您预期的不同。

与字符串'red'和'blue'（带引号）进行比较。

尝试将代码替换为：

<p ng-class="{'red':color==='red','blue':color==='blue'}">This is a paragraph.</p>

默认情况下，您有以下表达式：

color==blue

默认情况下，color=null，变量blue未定义。所以表达式null==undefined返回true，这就是为什么你的段落是蓝色的。