如何以角度附加列表中的项目?



你能告诉我如何在 angular 的列表中附加项目吗?我首先使用 xslt 转换,然后我想在按钮上的列表中添加项目,单击这是我的代码

在按钮上单击我只想在列表中添加"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>

数据.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>

任何更新

这更像是一个 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中的现有项目,甚至在角度开始之前,请尝试这个...

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

相关内容

  • 没有找到相关文章

最新更新