angular.js 数据仅显示最近的参考
我想要多个文本元素，通过函数动态添加，键控始终显示输入文本字段的内容。相反，绑定的文本仅显示在最近添加的文本元素上，而所有其他文本元素都会消失（？）。即使是我引用的正文中写入的原始 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
这是工作示例：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> -
慕尼黑的夜晚无繁华
这比我所拥有的更接近，并为我提供了一个阵列解决方案的良好开端（谢谢，Supercool）。不完全是我所追求的。这是我从您的代码中得到的状态：[State 1., after typing "1st" and pressing Go]input box: 1st1st[State 2. after adding "2nd," and pressing Go]input box: 1st 2nd1st1st 2nd[End State. after adding "3rd," and pressing Go]input box: 1st 2nd 3rd1st1st 2nd1st 2nd 3rd我想看到的是：[State 1., after typing "1st" and pressing Go]input box: 1st1st[State 2. after adding "2nd," and pressing Go]input box: 1st 2nd1st 2nd1st 2nd[End State. after adding "3rd," and pressing Go]input box: 1st 2nd 3rd1st 2nd 3rd1st 2nd 3rd1st 2nd 3rd此外，在按下“Go”之间的每个按键状态之后，所有生成的文本都将反映输入框中的任何内容。包括上述示例的所有这些中间状态，倒数第二个将是：[Penultimate state. in the middle of typing out "3rd" and before pressing Go]input box: 1st 2nd 3r1st 2nd 3r1st 2nd 3r我认为我可以获得这种功能，因为我认为（仍然这样做？）角度的 {{reference}} 链接到原始的，并且无论你有多少，当你制作它们等等，都会自动更新。 .
随时随地看视频慕课网APP
相关分类
JavaScript