Question

我一直在玩角，我目前正在玩耍。我想检查ng-model值是否大于0以应用不同的css样式。可以这样做吗？

`<span ng-model="users2" ng-hide="!myVar" ng-class="{'test2': users2 > 0}"  style="font-size:28px; color:purple" >`

任何帮助将不胜感激？谢谢！

Answer 1

你做的一切都是正确的

Look at this JSBin

另请参阅ngClass Documentation以获取更多示例。

如果它不起作用可能是另一个问题。

编辑：

我完全看到了这一点，但正如评论中所提到的，ngModel directive将输入，选择，textarea（或自定义表单控件）绑定到范围上的属性。所以在跨度上它没有做任何事情而且没有定义

JSBin Example

Answer 2

如果您想基于变量值更改span的css样式，则应使用ng-class。您甚至可以使用if-else语句：

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

Answer 3

内联样式的优先级高于css类。

如果您要将!important添加到您的课程，它应该按预期工作。但我会避免使用内联样式。因此只能使用ng-class。

请查看下面的演示或fiddle。

angular.module('demoApp', [])
	.controller('mainController', MainController);
    
function MainController() {
	var vm = this;
    angular.extend(vm, {
    	myVar: true,
        users2: 1
    });
}

.test2 {
    color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
    <input ng-model="ctrl.users2"/>
    <span ng-hide="!ctrl.myVar" style="font-size:28px; color:purple" ng-class="{'test2': ctrl.users2 > 0}">
    some content
    </span>
</div>

Answer 4

ng-model仅适用于输入框，文本框，单选按钮，复选框。由于您在跨度上使用了ng-model，因此它不会更新模型本身。

所以$ scope.users2 == undefined always

ng-model可以查看自己的值吗？

4 个答案: