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 に答える