ng-if contains
时间: 2023-09-12 19:06:51 浏览: 165
ng-if指令是AngularJS中的一个指令,用于根据条件来添加或移除元素。当ng-if的值为true时,元素会被保留在DOM中,当ng-if的值为false时,元素会被从DOM中移除。\[1\]而contains()是JavaScript中的一个方法,用于判断一个字符串是否包含另一个字符串。它返回一个布尔值,如果包含则返回true,否则返回false。在ng-if中使用contains()方法可以判断一个字符串是否包含另一个字符串,并根据结果来决定是否显示元素。
#### 引用[.reference_title]
- *1* *2* *3* [(四下)ng-class指令,ng-style指令,ng-show/ng-hide指令,ng-if指令等....](https://blog.csdn.net/action_xing/article/details/52447396)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关问题
jsp实现显示 9 个格子。 2、使用 getBuf 方法,检查每个格子的序号是否选择完毕,如果选择完毕则 NG,如果未选择则绘制各个序
号对应的格子。
1. JSP页面代码:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示9个格子</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
font-size: 24px;
font-weight: bold;
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td id="cell1" onclick="selectCell(1)">1</td>
<td id="cell2" onclick="selectCell(2)">2</td>
<td id="cell3" onclick="selectCell(3)">3</td>
</tr>
<tr>
<td id="cell4" onclick="selectCell(4)">4</td>
<td id="cell5" onclick="selectCell(5)">5</td>
<td id="cell6" onclick="selectCell(6)">6</td>
</tr>
<tr>
<td id="cell7" onclick="selectCell(7)">7</td>
<td id="cell8" onclick="selectCell(8)">8</td>
<td id="cell9" onclick="selectCell(9)">9</td>
</tr>
</table>
<script>
var selectedCells = [];
function selectCell(cellNum) {
var cell = document.getElementById("cell" + cellNum);
if (cell.classList.contains("selected")) {
cell.classList.remove("selected");
var index = selectedCells.indexOf(cellNum);
if (index > -1) {
selectedCells.splice(index, 1);
}
} else {
cell.classList.add("selected");
selectedCells.push(cellNum);
}
}
function getBuf() {
var buf = "";
for (var i = 1; i <= 9; i++) {
var cell = document.getElementById("cell" + i);
if (cell.classList.contains("selected")) {
buf += i + " is selected\n";
} else {
buf += i + " is not selected\n";
}
}
alert(buf);
}
</script>
<button onclick="getBuf()">检查选择状态</button>
</body>
</html>
```
2. 实现思路:
- 在页面中创建一个3x3的表格,每个单元格都有一个唯一的id,用于后面的操作。
- 点击某个单元格时,将其添加到已选单元格的数组中,并添加一个CSS类名,用于显示已选状态。再次点击已选单元格则取消选择,从已选单元格的数组中删除,并移除CSS类名。
- 点击检查选择状态按钮时,遍历每个单元格,判断是否被选择,如果被选择则在字符串缓冲区中记录其状态,否则记录未选择状态。最后弹出提示框显示所有单元格的状态。
阅读全文