angularjs 如何根据动态id显示div

xiaoyudi
  • 145

我在html里面动态设置了div的id代码如下:


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

html解析之后能出来动态id的效果,类似于这样:

<div ng-repeat="item in items">
    <div id="name1" class="ng-hide"> name1 </div>
    <div id="name2" class="ng-hide"> name2 </div>
    <div id="name3" class="ng-hide"> name3 </div>
<div>

我想要动态的控制这些div显示还是不显示。我在js里面写了这样的代码:

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

结果并没有实现我想要的效果,还是每次点击都会显示三个div。有什么办法能实现我想要的效果么?

回复
阅读 5.1k
7 个回答

虽然不明白为什么,但是我把class="ng-hide"改成了style=“desplay:none”就可以了。。。

用ng-show和ng-hide行不行

item里面加一个字段"isShow", 默认值为false,

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

点击按钮的时候,isShow的值制反。

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

在angular.js中控制元素显示的有两个方式 第一个是:ng-show ng-hide 还有一个是ng-if

建议把你的数据重新组织一下,用ng-hide控制元素隐藏与否:

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

----------


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

再加一个属性,写到div的自定义属性上去,然后ng-if做判断?

你知道吗?

宣传栏