I dynamically set the id code of p in html as follows:
<p ng-repeat="item in items">
<p id="{{item.name}}" class="ng-hide"> {{item.name}} </p>
<p>
After HTML parsing, the effect of dynamic ID can be seen, similar to this:
<p ng-repeat="item in items">
<p id="name1" class="ng-hide"> name1 </p>
<p id="name2" class="ng-hide"> name2 </p>
<p id="name3" class="ng-hide"> name3 </p>
<p>I want to dynamically control whether these p's are displayed or not. I wrote this code in js:
html:
<input type="button" ng-click="show(item.name)">
js:
$scope.show=function(name){
document.getElementById(name).style.display = "block";
}The result did not achieve the effect I wanted, and three ps were still displayed every time I clicked. Is there any way to achieve the effect I want?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Although I don’t understand why, I changed class="ng-hide" to style="desplay:none" and it worked. . .
Is it possible to use ng-show and ng-hide
Add a field "isShow" to item, the default value is false,
When the button is clicked, the value of isShow is reversed.
There are two ways to control the display of elements in angular.js. The first is: ng-show ng-hide and the other is ng-if
It is recommended to reorganize your data and use ng-hide to control whether elements are hidden or not:
Add another attribute, write it to the custom attribute of p, and then ng-if makes the judgment?
https://github.com/xufei/ng-c...