リストに項目を追加するにはどうすればいいですか？

あなたは私がhereをクリックし、ボタンの上にリスト内の項目を追加したいまず？私は、XSLT変換を使用していた角度のリストに項目を追加する方法を教えてください可能性は、私のコードリストに項目を追加するにはどうすればいいですか？

ボタンで、私はちょうどを追加する]をクリックしていますリスト内の項目。

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

任意の更新

出典

2017-08-17 naveen

タグ「角度」を削除してください。角2/4に向いています。あなたの質問はAngularJsに関連しているので、 'angularjs'タグは十分です。 –

あなたがXSLTを書くことができます前に、あなたが変換されているかを知る必要があるので、これは、むしろ、XSLTよりもangularjs質問ですあなたは現時点では知らないように聞こえます。

「リスト内の項目を追加する」とは、htmlの順序付けられていないリストに表示される新しい名前を追加することを意味していると仮定しています。これをanglejsで行うには、実際にモデルの配列プロパティに名前を格納し、リストをXSLTで事前レンダリングするのではなく、 "ng-repeat"ダイレクトを使ってliをレンダリングする必要があります。

<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このXSLTを試してみてください：あなたはXML内の既存のアイテムが必要な場合はあなたのコメントへの回答では、プリレンダリングされた、でも角度のキックの前では、代わりにこれを試して...

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

出典

2017-08-17 08:00:08

あなたの答えは正しいですが、私がサーバ上でxslt変換を行っている他の言葉をサーバ側でレンダリングしている場合は.exampleに問題があります。私たちは 'cntrl + u'を行っています。私はデータを追加することができますが、 '{ctrl + u'を参照している間に{{}}を参照することはできません – naveen

より良い方法をお勧めしますか？ – naveen

レンダリングされるhtml + js依然としてクライアント上で実行されるため、生成される場所は関係ありません。私は複数の項目を追加できるように私が修正した私のXSLTで間違いを見つけました。 –

リストに項目を追加するにはどうすればいいですか？

答えて

関連する問題