在这里，我正在加载一个 json 文件并使用 ng-repeat 我将 json 数据显示为表格形式。我正在向代码添加以下功能。
- 添加两个 CSS 的复选框: 气泡 CSS text-danger [内置类]
- 当您点击这些复选框时，CSS 仅应用于表格中的偶数行。
- 使用 ng-if 或 ngHide/Show 显示性别为男性的用户信息。
我使用 ng-if 来满足条件，因为 ng-if 将从 DOM 中删除元素。这意味着您的所有处理程序或附加到这些元素的任何其他内容都将丢失。
ng-show/ng-hide 不会从 DOM 中移除元素。它使用 CSS 样式来隐藏/显示元素。
我创建了 Codepen 我的问题的演示。这里 ng-if 和 ng-class-even 没有给出预期的 o/p。
HTML:
<body ng-app="module1" ng-controller="module1Ctrl as flight">
<div class="page-header">
<h1>Angular app</h1>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="danger">
Something's Wrong
</label>
<label>
<input type="checkbox" ng-model="bubble">
Zoom In/Out
</label>
</div>
<table class="table table-striped table-bordered">
<tr>
<th>name</th>
<th>Birthdate</th>
<th>gender</th>
<th>father</th>
<th>mother</th>
</tr>
<tr ng-repeat="x in flightData"
ng-class-even ="{'text-danger':danger,'bubble': bubble}"
ng-if="x.sex=='f'">
<td>{{x.name}}</td>
<td>{{ x.born |date:'yyyy-MM-dd THH:mm:ss'}}</td>
<td>{{x.sex }}</td>
<td>{{x.father}}</td>
<td>{{x.mother}}</td>
</tr>
</table>
</div>
</body>
JS
var app=angular.module('module1',[]);
app.controller('module1Ctrl', function ($scope,$http) {
$scope.getDataFromServer = function () {
$http.get('http://codepen.io/timivey/pen/emQZYY.js').then(
function(res){
console.log(res.data);
$scope.flightData = res.data;
}
,function (err) {
console.log(err.message);
})
};
$scope.getDataFromServer();
$scope.showList='table';
});
最佳答案
只是对 Joel 的回答做了一个小改动。您无需创建单独的过滤方法。
<tr ng-repeat="x in flightData | filter:{sex:'f'}"
ng-class-even ="{'text-danger':danger,'bubble': bubble}">
关于javascript - ng-if 和 ng-class-even/odd 不能很好地协同工作并且不会得到预期的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39799004/