Question

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

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

我在同一个html页面中有以下AngularJS代码：

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

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

Answer 1

您不希望像这样添加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;
      };
};

最后一个有效的例子是here on jsfiddle

在getElementByID中获取动态ID（来自AngularJS）

1 个答案: