Angularjs将代码转换为指令或ng重复

Angularjs converting code to directive or ng-repeat

本文关键字：ng 重复 指令 代码 转换 Angularjs      更新时间：2023-09-26

我目前正在尝试将json响应转换为jquery手风琴。我已经让代码工作起来了，我想清理我的代码以使其更有意义。目前，我很难让它工作，从那时起，我尝试了一个ng重复，但我无法让它工作b/c它在每个可折叠的div周围创建了一个div，并导致了奇怪的结果，我的下一个猜测是将它变成一个指令，我不知道如何在没有与ng重复相同结果的情况下做到这一点。我创建了一个Plunker来帮助可视化这个问题。

http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview

关键注意：html的结构不能改变继承CSS的b/c，不能改变。

任何帮助或指向正确的方向都会很好。在这一点上，我会接受一个适当的工作ng重复，或者将其转换为一个有效的指令。

这是JSON

$scope.documentTypes= [{"name":"name1","links": [{"rel":"self","href":"url1"}]},
{"name":"name2","links":[{"rel":"self","href":"url2"}]},
{"name":"name3","links":[{"rel":"self","href":"url3"}]},
{"name":"name4","links":[{"rel":"self","href":"url4"}]}];

正确的工作代码：

<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[0])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[0].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:150px;">
                {{documentTypes[0]}}
            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[2])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[1].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[1]}}
            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[3])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[2].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[2]}}
            </p>
        </div>
        <h3 tabindex="0"
            ng-click="setVariable(documentTypes[0])"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{documentTypes[3].name}}
            </a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
            <p style="height:215px;">
                {{documentTypes[3]}}
            </p>
        </div>
    </div>

ng重复：

  <h1>Trying NG-Repeat</h1>
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
  <div ng-repeat="docs in documentTypes">
    <h3 tabindex="0"
            ng-click="setVariable(docs)"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{docs.name}}
            </a>
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
      <p style="height:215px;">
          {{docs}}
      </p>
    </div>
  </div>
</div>

您可以稍微更改您的指令：

.directive('documentTypes', function (){
  return {
    restrict: 'E',
    replace: true, //html would be replaced to template
    templateUrl: 'document_type.html',
    link:function(scope,elem){
      setTimeout(function(){
        elem.accordion({ //you not need $(elem) because elem already jQuery element
          active: true,
          autoHeight: true,
          navigation: true,
          collapsible: true
        });
      });
    }
  }
})

并移动到模板化所有结构

<div class="ui-accordion ui-widget ui-helper-reset" role="tablist">
  <h3 ng-repeat-start="doc in documentTypes" tabindex="0" ng-click="setVariable(doc)" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" role="tab" aria-selected="false" aria-controls="ui-accordion-accordion-panel-0">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <a href="#" style="font-size: .8em;">
        {{doc.name}}
    </a>
  </h3>
  <div ng-repeat-end class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
    <p style="height:150px;">
      {{doc}}
    </p>
  </div>
</div>

最后将其用作简单的

<document-types></document-types>

工作柱塞

您可以使用ng repeat start/ng repeat end在标头中进行循环，然后迭代h3中的标题和正文，而不需要像下面这样在div中的ng repeat中添加额外的div：

<h1>Trying NG-Repeat</h1>
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist" >
    <h3 ng-repeat-start="docs in documentTypes" tabindex="0"
            ng-click="setVariable(docs)"
            class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
            role="tab" aria-selected="false"
            aria-controls="ui-accordion-accordion-panel-0"><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
                class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            <a href="#" style="font-size: .8em;">
                {{docs.name}}
            </a>
    </h3>
    <div ng-repeat-end class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
             id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
             aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
      <p style="height:215px;">
          {{docs}}
      </p>
    </div>
</div>
相关文章：