Question

你能告诉我如何以角度方式在列表中追加项目吗？我首先使用xslt转换然后我想在按钮点击列表中添加项目here是我的代码

点击按钮我只想在列表中添加"Test"项。

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

任何更新

Answer 1

这更像是一个angularjs问题，而不是XSLT，因为在你编写XSLT之前，你需要知道你正在转换的内容，而且听起来你现在还不知道。

通过“追加列表中的项目”我假设您的意思是要添加一个出现在html中无序列表中的新名称。要在angularjs中执行此操作，您应该将名称存储在模型中的数组属性中，并使用“ng-repeat”direct来呈现li，而不是使用XSLT预呈现列表。

试试这个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>

编辑：在回答你的评论时，如果你想要预渲染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>

如何在角度中附加列表中的项目？

1 个答案: