angulaire.js - angulairejs comment afficher div en fonction de l'identifiant dynamique

Question

J'ai défini dynamiquement le code d'identification de p en html comme suit :

<p ng-repeat="item in items">
    <p id="{{item.name}}" class="ng-hide"> {{item.name}} </p>
<p>

Après l'analyse HTML, l'effet de l'ID dynamique peut être vu, similaire à ceci :

<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>

Je souhaite contrôler dynamiquement si ces p sont affichés ou non. J'ai écrit ce code en js :

html:
<input type="button" ng-click="show(item.name)">
js:
$scope.show=function(name){
    document.getElementById(name).style.display = "block";
}

Le résultat n'a pas produit l'effet souhaité, et trois ps s'affichaient toujours à chaque fois que je cliquais. Existe-t-il un moyen d'obtenir l'effet souhaité ?

Answer 1

Bien que je ne comprenne pas pourquoi, j'ai changé class="ng-hide" en style="desplay:none" et cela a fonctionné. . .

Answer 2

Est-il possible d'utiliser ng-show et ng-hide

Answer 3

Ajoutez un champ "isShow" à l'élément, la valeur par défaut est false,

<p ng-repeat="item in items">
    <p id="{{item.name}}" class="ng-hide" ng-show="item.isShow"> {{item.name}} </p>
<p>

Lorsque vous cliquez sur le bouton, la valeur de isShow est inversée.

html:
<input type="button" ng-click="show(index)">
js:
$scope.show=function(index){
    $scope.items[index].isShow = !$scope.items[index].isShow;
}

Answer 4

Il existe deux façons de contrôler l'affichage des éléments dans angulaire.js La première est : ng-show ng-hide et l'autre est ng-if

.

Answer 5

Il est recommandé de réorganiser vos données et d'utiliser ng-hide pour contrôler si les éléments sont masqués ou non :

`[
    {
        id:'id1',
        name:'name1',
        hide:false //配合nd-hide实现元素隐藏和显示
    },
    {
        id:'id2'
        name:'name2',
        hide:true
    }
    //...
]

----------


<p ng-repeat="item in items">
    <p id="item.id" ng-hide="item.hide" ng-bind="item.name"></p>
<p>`
写的比较简单，有问题再问

Answer 6

Ajoutez un autre attribut, écrivez-le dans l'attribut personnalisé de p, puis ng-if rend le jugement ?

Answer 7

https://github.com/xufei/ng-c...