angular.js - angularjs中怎么动态的插入删除元素

【字号: 日期:2022-12-26浏览:19作者:雯心

问题描述

就像这样,我想按下回车之后在html中添加一个元素<p class=’main’></p>, 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){} }});

问题解答

回答1:

数据驱动模型。你需要转变操作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='https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js'></script></head><body ng-app='myApp'> <p ng-controller='todoCtrl'><p> <input type='text' ng-keyup='enterEvent($event)' value=''></p><p ng-repeat='(i,item) in myDom' class=’main’>我是第{{i+1}}个main {{myDom}}</p> </p></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>回答2:

可以把这个<p class=’main’></p>先写在页面上,写在todoCtrl中。之后在元素上添加ngShow的语法,来随时控制元素的隐藏与显示:

<p class=’main’ ng-show='showMain'></p>

$scope.showMain=false;$scope.enterEvent = function(e) { var keycode = window.event?e.keyCode:e.which; if(keycode==13){$scope.showMain=true; }}

相关文章: