我想要多个文本元素，通过函数动态添加，键控始终显示输入文本字段的内容。相反，绑定的文本仅显示在最近添加的文本元素上，而所有其他文本元素都会消失（？）。即使是我引用的正文中写入的原始 span 标签也不再更新到用户提供的数据（不是说您可以在下面的示例中说出最后一部分，因为它是隐藏的）。w3school 代码在这里运行：https ://www.w3schools.com/code/tryit.asp?filename=GD4AV18UABPF<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <script> function linkPairing() { var divElement = angular.element(document.querySelector('.transaction')); var $hidden = angular.element(document.querySelector('.hiddenNodeName')); divElement.append($hidden); divElement.append("<br />"); } </script> <p>Input something in the input box:</p> <form> <p>Name: <input type="text" ng-model="newNodeName"></p> <p>{{newNodeName}}</p> <p>{{newNodeName}}</p> <button class="addNewTransaction" id="addNewTransaction" type="button" onclick="linkPairing()">Go</button> </form> <div hidden><span class="hiddenNodeName" >{{newNodeName}}</span></div> <p class="transaction"></p> </div></body></html>我意识到这种用于添加绑定数据引用的隐藏标记方法可能是非常规的，并且根据其他问题，显示的引用通常可能由以下内容生成：var $div = $("<span>{{newNodeName}}</span>");divElement.append($compile($div)($scope));$scope.$apply();我尝试了上面的变体，但甚至无法获得示例中看到的部分成功。我怀疑我需要对角度有更深入的了解，尤其是范围，才能通过这种方法取得成功。我同时使用 jquery 和 angular，并阅读 stackOverflow 的意见以将 js 模块负载降至最低。最初一切都在 jquery 中，但是当我使用具有链接数据显示的特殊功能时，Angular 中的 ng-bind 数据看起来非常吸引人。由于不确定我最终是否会成功，我现在不愿意将所有内容重构为 angular.js。这个变通办法可以按我的预期运行吗？
2 回答
RISEBY
TA贡献1856条经验 获得超5个赞
这是工作示例：https ://www.w3schools.com/code/tryit.asp?filename=GD4KGYTO3RCF
还有一个片段
<!DOCTYPE html>
<html>
<!--module starts surrounds body tag name is myapp -->
<body ng-app="myapp">
<!--controller surrounds the div tag ,A controller is associated with module for functionality purpose-->
<div ng-controller="myctrl">
<form >
Input something in the input box <br><br>
Name: <input type="text" ng-model="newNodeName">
<!-- we use ng click for click in angular js -->
<button id="btn-newTransation" type="button"
ng-click="linkPairing()">Go</button>
</form>
<!-- ng-repeat repeats the html inside it , nodes is array, node is each iteration's value , track by $index to avoid duplication error and get index
ng-repeat="node in nodes"
-->
<!--ng repeat usually expects array but to just repeat an element some time this will work as shortcut-->
<div ng-repeat="x in [].constructor(count) track by $index" class="nodes">
<p>{{newNodeName}}</p>
</div>
{{message}}
<!-- i dont know why are you using following tags for -->
<div hidden>
<span class="hiddenNodeName">{{newNodeName}}</span></div>
<p class="transaction"></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
//initializing the myapp with controller
angular.module("myapp",[]).controller("myctrl",function($scope){
//variables in $scope are accessible in html example inside interpolation {{newNodeName}}
$scope.message="";
$scope.count=0;
$scope.linkPairing=function(){
$scope.count++;
if($scope.count==3){
$scope.message="Did it work? if it worked please upvote and mark it as correct "
}
}
});
</script>
</body>
</html>
慕尼黑的夜晚无繁华
TA贡献1864条经验 获得超6个赞
这比我所拥有的更接近，并为我提供了一个阵列解决方案的良好开端（谢谢，Supercool）。不完全是我所追求的。这是我从您的代码中得到的状态：
[State 1., after typing "1st" and pressing Go]
input box: 1st
1st
[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st
1st 2nd
[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st
1st 2nd
1st 2nd 3rd
我想看到的是：
[State 1., after typing "1st" and pressing Go]
input box: 1st
1st
[State 2. after adding "2nd," and pressing Go]
input box: 1st 2nd
1st 2nd
1st 2nd
[End State. after adding "3rd," and pressing Go]
input box: 1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd
1st 2nd 3rd
此外，在按下“Go”之间的每个按键状态之后，所有生成的文本都将反映输入框中的任何内容。包括上述示例的所有这些中间状态，倒数第二个将是：
[Penultimate state. in the middle of typing out "3rd" and before pressing Go]
input box: 1st 2nd 3r
1st 2nd 3r
1st 2nd 3r
我认为我可以获得这种功能，因为我认为（仍然这样做？）角度的 {{reference}} 链接到原始的，并且无论你有多少，当你制作它们等等，都会自动更新。 .
添加回答
举报
0/150
提交
取消