suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

就像这样，我想按下回车之后在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){

        }
    }
});
黄舟黄舟2744 Tage vor610

Antworte allen(2)Ich werde antworten

  • 滿天的星座

    滿天的星座2017-05-15 17:12:00

    数据驱动模型。
    你需要转变操作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">
    <p id="father" ng-controller="todoCtrl">

        <p>
            <input id="txt" 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>

    Antwort
    0
  • 某草草

    某草草2017-05-15 17:12:00

    可以把这个<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;
    }
}

    Antwort
    0
  • StornierenAntwort