在getElementByID中获取动态id(从AngularJS)

Getting Dynamic id (from AngularJS) in getElementByID

本文关键字：AngularJS id 动态 getElementByID 获取      更新时间：2023-09-26

我有一个可点击的下拉列表如下:

<ul class="dropdown">
    <li ng-repeat="item in items" ng-controller="ListCtrl">
        <a href="#" onclick="addWidget();">{{item.name}}</a>
    </li>
</ul>

我有以下代码的AngularJS在同一个html页面:

<li ng-repeat="item in items" ng-controller="ListCtrl">
    <div id="{{item.itemIndex}}">
     Some Code Here
    </div>
</li>

现在我想添加每个div在我的页面时，每次单击列表项。我像这样调用addWidget()函数:

<script type="text/javascript">
    function addWidget(){
    document.getElementById('').style.display='block';
    }
</script>

现在我的问题是，如果我分配一个静态id到div和传递它在getElementByID然后它工作正常，但在动态情况下，我如何传递id，所以它将在每种情况下工作正常?

您不希望添加这样的javascript。下面是一个示例:

<body ng-app="myApp">
      <div ng-controller="ListCtrl">
          <ul class="dropdown">
              <li ng-repeat="item in items">
                  <a href="#" ng-click="addWidget(item)">{{item.name}}</a>
              </li>
          </ul>
          <ul>
              <li ng-repeat="item in items" ng-show="item.show">
                  <div>Some Code Here</div>
              </li>
          </ul>
      </div>
</body>

和你的控制器:

function ListCtrl($scope){
      $scope.items = [{name: 'one'}, {name: 'two'}];
      $scope.addWidget = function(item){
          item.show = !item.show;
      };
};

最后一个例子是jsfiddle

相关文章：