angular.js - angularjs 如何根據動態id顯示div
给我你的怀抱
给我你的怀抱 2017-05-15 17:08:52
0
7
726

我在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。有什麼辦法能實現我想要的效果麼?

给我你的怀抱
给我你的怀抱

全部回覆(7)
过去多啦不再A梦

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

刘奇

用ng-show和ng-hide行不行

伊谢尔伦

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;
}
Ty80

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

大家讲道理

建議把你的資料重新組織一下,用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>`
写的比较简单,有问题再问
过去多啦不再A梦

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

阿神

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板