Html CSS样式没有';使用ngClass时不适用
我有一个动态更新CSS的问题。这是我的HTML代码:Html CSS样式没有';使用ngClass时不适用,html,css,angularjs,ng-class,Html,Css,Angularjs,Ng Class,我有一个动态更新CSS的问题。这是我的HTML代码: <!DOCTYPE html> <html lang="en" ng-app="ListItems"> <head> <meta charset="utf-8"> <title>Test project</title> <link rel="stylesheet" href="Content/bootstrap.css"> &l
<!DOCTYPE html>
<html lang="en" ng-app="ListItems">
<head>
<meta charset="utf-8">
<title>Test project</title>
<link rel="stylesheet" href="Content/bootstrap.css">
<link rel="stylesheet" href="Content/style.css">
</head>
<body ng-controller="ListController as list">
<h1>To-do list</h1>
<div id="main">
<article ng-repeat="item in items track by $index" ng-class="{{item.IsCompleted ? 'completed' : 'uncompleted'}}">
<p>{{item.Description}}</p>
<footer>
<small>
Is completed: <input type="checkbox" ng-checked="{{item.IsCompleted}}" ng-click="complete($index)" />
</small>
</footer>
</article>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/script.js"></script>
</body>
</html>
但什么也没发生 尝试使用正确的
ng类
语法,并确保.completed
CSS类由于您的CSS声明而可用。这里有一个简单的工作将帮助你。将其与您的解决方案进行比较。请看一下AngularJS的文章
<article ng-repeat="item in items track by $index"
ng-class="{'completed': item.IsCompleted, 'uncompleted': !item.IsCompleted}">
<p>{{item.Description}}</p>
<footer>
<small>
Is completed:
<input type="checkbox"
ng-checked="{{item.IsCompleted}}"
ng-click="complete($index)" />
</small>
</footer>
</article>
{{item.Description}
已完成:
您需要更改ng类语法。简单一点:
<article ng-repeat="item in items track by $index" ng-class="{'completed': item.IsCompleted}">
查看F12调试器,查看是否应用了tstyles。您还可以看到我的
文章
完成了类的原因,但我在页面上没有看到任何可见的更改。ng类
@JosephKatzman的无效语法不需要在ng类
中使用{}}
,只需要在那里有一个表达式或JSON作为@linanswer@PankajParkar谢谢。你是对的,但是怎么可能呢?为什么我的例子不起作用?
<article ng-repeat="item in items track by $index" ng-class="{'completed': item.IsCompleted}">