如何以角度在列表中附加项目？答案

【问题标题】：how to append items in list in angular?如何以角度在列表中附加项目？
【发布时间】：2018-01-25 09:57:45
【问题描述】：

你能告诉我如何在 Angular 列表中附加项目吗？我首先使用 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>

任何更新

【问题讨论】：

请删除标签angular，它指向Angular 2/4。您的问题与 AngularJs 有关，因此 angularjs 标签就足够了。

标签： javascript angularjs xslt xslt-1.0 xslt-2.0

【解决方案1】：

这更像是一个 angularjs 问题，而不是 XSLT，因为在您编写 XSLT 之前，您需要知道要转换为什么，而目前您似乎不知道。

通过“在列表中追加项目”我假设您的意思是您想要添加一个新名称，该名称出现在 html 的无序列表中。要在 angularjs 中执行此操作，您实际上应该将名称存储在模型中的数组属性中，并使用“ng-repeat”直接渲染 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 中的现有项目，甚至在 angular 开始之前，请尝试这个...

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

【讨论】：

您的答案是正确的，但存在问题。例如，如果我有服务器端渲染，换句话说，我们正在服务器上进行 xslt 转换，.如果我们正在做cntrl +u，我们会看到解析数据。 .但是在您的解决方案之后，我可以附加数据..但是我看到 {{}} 而使用 cntrl +u 没有服务器端渲染
能否请您提出更好的方法
服务器端渲染不应该有所作为，因为渲染的 html + js 仍然在客户端执行，所以它在哪里生成并不重要。我在我的 XSLT 中发现了一个错误，但我已经更正了，以允许附加多个项目。
另外，当使用 angular 会操纵 DOM 时，应避免使用 CTRL + U 查看源代码。相反，请执行 CTRL + SHIFT + I 检查代码，因为这将在 Angular 更新后显示 HTML。
how google knows what will be present in my page..好的这是渲染问题我会尝试解决..我是说using your solution it create SEO isue