3

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

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

现在我的问题是，如果我将静态 id 分配给 div 并将其传递给 getElementByID 那么它可以正常工作，但在动态情况下我如何传递 id 以便在每种情况下都能正常工作？

4

1 回答 1

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

最后一个工作示例在 jsfiddle 上

于 2013-04-29T15:08:58.747 回答