wie anfügen von Elementen in der Liste in eckigen?

könnten Sie mir bitte sagen, wie in Winkel Objekte in der Liste anhängen? I XSLT-Transformation bin mit erster dann möchte ich Artikel in der Liste auf die Schaltfläche hinzufügen here klicken ist mein Codewie anfügen von Elementen in der Liste in eckigen?

Auf Schaltfläche klicken Ich möchte nur "Test" hinzufügen Element in Liste.

<?xml version="1.0" encoding="UTF-8" ?> 
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
    <xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes"/> 

    <xsl:template match="list"> 
     <hmtl ng-app="app"> 
      <head> 
       <title>New Version!</title> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script> 
       <script> 
        angular.module('app',[]).controller('cntr',function($scope){ 

        $scope.name="dd"; 
        $scope.append =function(){ 

        alert('append'); 

        } 

        }); 
       </script> 
      </head> 
      <body> 
       <div ng-controller="cntr"> 
        {{4+6}} 
        <ul> 
         <xsl:apply-templates select="name"/> 
        </ul> 
        <button ng-click="append()">Append</button> 
       </div> 


      </body> 

     </hmtl> 
    </xsl:template> 

    <xsl:template match="name"> 
     <li> 
      <xsl:value-of select="."/> 
     </li> 
    </xsl:template> 
</xsl:transform>

data.xml

<list> 
    <name>A new XSLT engine is added: Saxon 9.5 EE, with a namecense (thank you Michael Kay!)</name> 
    <name>XSLT 3.0 support when using the new Saxon 9.5 EE engine!</name> 
    <name>Preview your result as HTML when doctype is set to HTML (see this example)</name> 
    <name>Preview your result as PDF when doctype is set to XML and your document starts with root element of XSL-FO. Apache FOP is used to generate the PDF</name> 
    <name>Added some namenks to useful XSLT sites</name> 
</list>

jede Aktualisierung

Quelle

2017-08-17 naveen

Bitte entfernen Sie das Tag 'angular' und es richtet sich an Angular 2/4. Ihre Frage bezieht sich auf AngularJs, daher ist 'angularjs' ausreichend. –

Das ist mehr eine Frage AngularJS, anstatt XSLT, weil, bevor Sie XSLT schreiben können, müssen Sie wissen, was Sie verwandeln zu, und es klingt, als ob Sie im Moment nicht wissen.

Mit "Objekte in Liste anhängen" gehe ich davon aus, dass Sie meinen, Sie möchten einen neuen Namen hinzufügen, der in der ungeordneten Liste in html erscheint. Um dies in angularjs zu tun, sollten Sie die Namen wirklich in einer Array-Eigenschaft im Modell speichern und "ng-repeat" direkt zum Rendern der li verwenden, anstatt die Liste mit XSLT vorzurendern.

Versuchen Sie, diese XSLT

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
    <xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes"/> 

    <xsl:template match="list"> 
     <hmtl ng-app="app"> 
      <head> 
       <title>New Version!</title> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script> 
       <script> 
        angular.module('app',[]).controller('cntr',function($scope){ 

        $scope.names = [ 
         <xsl:apply-templates select="name"/> 
        ]; 

        $scope.name="dd"; 
        $scope.append = function(){ 
         $scope.names.push($scope.name); 
        } 
        }); 
       </script> 
      </head> 
      <body> 
       <div ng-controller="cntr"> 
        {{4+6}} 
        <ul> 
         <li ng-repeat="name in names track by $index"> 
          {{name}} 
         </li> 
        </ul> 
        <button ng-click="append()">Append</button> 
       </div> 
      </body> 
     </hmtl> 
    </xsl:template> 

    <xsl:template match="name"> 
     <xsl:if test="position() > 1">, </xsl:if> 
     <xsl:text>'</xsl:text> 
     <xsl:value-of select="."/> 
     <xsl:text>'</xsl:text> 
    </xsl:template> 
</xsl:transform>

EDIT: In Antwort auf Ihren Kommentar, wenn Sie die vorhandenen Elemente in der XML vorgerendert wollen, noch bevor Winkel Tritte in, versuchen Sie dies stattdessen ...

<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
    <xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes"/> 

    <xsl:template match="list"> 
     <hmtl ng-app="app"> 
      <head> 
       <title>New Version!</title> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script> 
       <script> 
        angular.module('app',[]).controller('cntr',function($scope){ 

        $scope.names = []; 

        $scope.name="dd"; 
        $scope.append = function(){ 
         $scope.names.push($scope.name); 
        } 
        }); 
       </script> 
      </head> 
      <body> 
       <div ng-controller="cntr"> 
        {{4+6}} 
        <ul> 
         <xsl:apply-templates select="name"/> 
         <li ng-repeat="name in names track by $index"> 
          {{name}} 
         </li> 
        </ul> 
        <button ng-click="append()">Append</button> 
       </div> 
      </body> 
     </hmtl> 
    </xsl:template> 

    <xsl:template match="name"> 
     <li> 
      <xsl:value-of select="."/> 
     </li> 
    </xsl:template> 
</xsl:transform>

Quelle

2017-08-17 08:00:08

Ihre Antwort ist korrekt, aber es gibt ein Problem in diesem Beispiel, wenn ich serverseitige Rendering andere Wörter haben wir tun xslt Transformation auf Server, .wenn wir 'cntrl + u' tun, sehen wir die Analysedaten ..aber nach Ihrer Lösung Ich bin in der Lage, Daten anzuhängen ..aber ich sehe {{}}, während usgn 'cntrl + u' keine Server-Seite zerbricht – naveen

Könnten Sie bitte besseren Weg vorschlagen – naveen

Serverseitige Rendering sollte keinen Unterschied machen, wie die HTML + JS, die gerendert wird wird immer noch auf dem Client ausgeführt, so dass es egal ist, wo es generiert wird. Ich habe einen Fehler in meiner XSLT entdeckt, den ich jedoch korrigiert habe, damit mehrere Elemente angehängt werden können. –

wie anfügen von Elementen in der Liste in eckigen?

Antwort

Verwandte Themen