javascript - 如何添加`` 带有按钮的元素单击AngularJS
问题描述
附加对象后如何实时使用 ng-bind
我希望能够添加一个新元素并使用 ng-bind 属性来更改新元素的值。
我已经尝试了多种方法,请参阅下面的代码以获得我所能想到的最好的。
$(document).ready(function() {
$("#create-input").click(function() {
var newInput = document.createElement("p");
var code = document.createElement("span");
code.innerHTML = "{{input2}}";
newInput.innerHTML = "<p>{input2}: <input type='text' ng-model='name2'>  {{name2}}</p>";
$("#target-container").append(newInput);
$("#main-container").append(code);
});
});
当我在新附加的输入中添加文本时,{{name2}}
附加值不会改变。我不明白为什么我无法{{name2}}
在附加后通过文本输入框进行更改。
解决方案
使用该ng-repeat
指令将输入元素添加到 DOM:
angular.module("app",[])
.controller("ctrl",function($scope) {
$scope.arr=[
{name: "name1", value: ""}
];
$scope.addInput = function() {
$scope.arr.push( {
name: "name" + ($scope.arr.length+1),
value: ""
})
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl" >
<div ng-repeat="elem in arr">
{{elem.name}}:
<input ng-model="elem.value">
</div>
<button ng-click="addInput()">Add Input</button>
<div>{{arr}}</div>
</body>
推荐阅读
- javascript - 获取最后一个重定向 URL 的函数(使用 javascript 进行的重定向)
- excel - 如何在 .txt 条件 VBA 中保存列
- python - 多处理池为创建的每个进程运行整个代码,而不仅仅是传递给它的函数
- shell - 解压文件,然后一步一步在控制台中显示
- python - 在 CPU 而不是 GPU 上运行 BERT
- android - 我可以通过 svg 文件创建 GaussianBlur 效果吗?
- reactjs - lottie-react-native 需要 react@* 的对等点,但没有安装
- symfony - Symfony4 - AD/LDAP - 身份验证:凭据无效
- mysql - 使用 $ 符号而不是 %
- python - 如何在熊猫中进行精确的十进制数计算?