Question

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

<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>

Answer 1

您在任何地方都没有定义任何变量red或blue，因此它们的值会计算为undefined，它会以不同的方式传递比较结果。

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

Answer 2

尝试用以下代码替换您的代码：

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

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

color==blue

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

ng-class在AngularJs＆＃39;中没有正常工作

2 个答案: