angular.js - angularjs cara memaparkan div berdasarkan id dinamik

Question

Saya secara dinamik menetapkan kod id p dalam html seperti berikut:

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

Selepas penghuraian HTML, kesan ID dinamik boleh dilihat, sama seperti ini:

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

Saya mahu mengawal secara dinamik sama ada p ini dipaparkan atau tidak. Saya menulis kod ini dalam js:

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

Hasilnya tidak mencapai kesan yang saya inginkan, dan tiga ps masih dipaparkan setiap kali saya mengklik. Adakah terdapat cara untuk mencapai kesan yang saya inginkan?

Answer 1

Walaupun saya tidak faham mengapa, saya menukar class="ng-hide" kepada style="desplay:none" dan ia berjaya. . .

Answer 2

Adakah boleh menggunakan ng-show dan ng-hide

Answer 3

Tambah medan "isShow" pada item, nilai lalai adalah palsu,

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

Apabila butang diklik, nilai isShow diterbalikkan.

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

Answer 4

Terdapat dua cara untuk mengawal paparan elemen dalam angular.js Yang pertama ialah: ng-show ng-hide dan satu lagi ialah ng-if

Answer 5

Adalah disyorkan untuk menyusun semula data anda dan menggunakan ng-hide untuk mengawal sama ada elemen tersembunyi atau tidak:

`[
    {
        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

Tambahkan atribut lain, tulis pada atribut tersuai p, dan kemudian ng-if membuat pertimbangan?

Answer 7

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