angular.js - angularjs中怎麼動態的插入刪除元素
黄舟
黄舟 2017-05-15 17:10:00
0
2
603

就像這樣,我想按下回車之後在html中加入一個元素

, 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){

        }
    }
});
黄舟
黄舟

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

全部回覆(2)
滿天的星座

資料驅動模型。
你需要轉變操作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>
某草草

可以把這個<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;
    }
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板