CSS 使用 ngClass 时样式不适用
CSS styles doesn't apply when using ngClass
我在动态 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">
<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>
现在,如果项目已完成,我想应用以下 css 样式:
.completed {
background-color: red;
}
但是什么也没发生。
尝试使用正确的 ng-class
语法并确保 .completed
CSS class 由于您的 CSS 声明而可用。这是 AngularJS 的简单工作 fiddle which will help you. Compare it with your solution. Please take a look at the ng-class documentation。
<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>
您需要更改 ng-class 语法。简单点:
<article ng-repeat="item in items track by $index" ng-class="{'completed': item.IsCompleted}">
我在动态 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">
<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>
现在,如果项目已完成,我想应用以下 css 样式:
.completed {
background-color: red;
}
但是什么也没发生。
尝试使用正确的 ng-class
语法并确保 .completed
CSS class 由于您的 CSS 声明而可用。这是 AngularJS 的简单工作 fiddle which will help you. Compare it with your solution. Please take a look at the ng-class documentation。
<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>
您需要更改 ng-class 语法。简单点:
<article ng-repeat="item in items track by $index" ng-class="{'completed': item.IsCompleted}">