naveen naveen - 3 months ago 19
Javascript Question

how to append items in list in angular?

could you please tell me how to append items in list in angular ?I am using xslt transformation first then I want to add item in list on button click here is my code

On button click I just want to add

"Test"
item in list.

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


any update

Answer Source

This is more an angularjs question, rather than XSLT, because before you can write XSLT you need to know what you are transforming to, and it sounds like you don't know at the moment.

By "append items in list" I am assuming you mean you want to add a new name that appears in the unordered list in html. To do this in angularjs, you should really be storing the names in an array property in the model, and using the "ng-repeat" direct to render the li, rather than pre-rendering the list with XSLT.

Try this 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">
                           {{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>