angular.js - How to dynamically insert and delete elements in angularjs
黄舟
黄舟 2017-05-15 17:10:00
0
2
650

Just like this, I want to add an element<p class='main'></p> in html after pressing enter. How should I write the following if? There is another question. How does angularjs operate the DOM? I just started learning it and I don’t quite understand it.
var app = angular.module('myApp',[])

.controller('todoCtrl',function ($scope) {

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

        }
    }
});
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

reply all(2)
滿天的星座

Data-driven model.
You need to change your thinking about operating dom.
What do you want to do after entering? You need an extra dom. Assuming that the previous dom number is 0, then if you press Enter, it will be +1.
Then it’s easy. You first define a variable. Whether the variable is initialized to 1 or 10,000 depends on your mood.

<!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>
某草草

You can put this <p class='main'></p>先写在页面上,写在todoCtrl in. Then add the ngShow syntax to the element to control the hiding and display of the element at any time:

<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;
    }
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template