angular.js - angularjs中怎么动态的插入删除元素
本文介绍了angular.js - angularjs中怎么动态的插入删除元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
就像这样，我想按下回车之后在html中添加一个元素<div class='main'></div>, if下面该怎么写？还有一个问题，angularjs到底是怎么来操作DOM的，刚开始学，不太理解。
var app = angular.module('myApp',[])
.controller('todoCtrl',function ($scope) {
$scope.enterEvent = function(e) {
var keycode = window.event?e.keyCode:e.which;
if(keycode==13){
}
}
});解决方案
数据驱动模型。
你需要转变操作dom的思想。
你想你回车后要做什么操作，你要多一个dom啊。假设之前的dom数为0，那你回车就是+1咯。
那这就简单了，你首先定义一个变量，至于这个变量初始化的时候是1个还是10000个这个就看你心情了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div id="father" ng-controller="todoCtrl">
<div>
<input id="txt" type="text" ng-keyup="enterEvent($event)" value="">
</div>
<div ng-repeat="(i,item) in myDom" class='main'>我是第{{i+1}}个main {{myDom}}</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.myDom = [];
var i = 1;
$scope.enterEvent = function(e) {
var keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
$scope.myDom.push(i)
i++;
}
}
});
</script>
</html>这篇关于angular.js - angularjs中怎么动态的插入删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
