angular.js - angularjs 如何根據動態id顯示div

Question

我在html裡面動態設定了p的id程式碼如下：

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

html解析之後能出來動態id的效果，類似這樣：

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

我想要動態的控制這些p顯示還是不顯示。我在js裡面寫了這樣的程式碼：

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

結果並沒有達到我想要的效果，還是每次點擊都會顯示三個p。有什麼辦法能實現我想要的效果麼？

Answer 1

雖然不懂為什麼，但是我把class="ng-hide"改成了style=「desplay:none」就好了。 。 。

Answer 2

用ng-show和ng-hide行不行

Answer 3

item裡面加一個欄位"isShow", 預設值為false，

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

點擊按鈕的時候，isShow的值制反。

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

Answer 4

在angular.js中控制元素顯示的有兩個方式 第一個是:ng-show ng-hide 還有一個是ng-if

Answer 5

建議把你的資料重新組織一下，用ng-hide控制元素隱藏與否：

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

再加一個屬性，寫到p的自訂屬性上去，然後ng-if做判斷？

Answer 7

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