angular对DOM进行添加删除

时间：2022-10-16 19:37:28
<body>
<script src="https://code.angularjs.org/1.2.6/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
    $scope.name = [
        {
            "name":"code_bunny",
            "score":"100",
            "id":"001"        
        },{
            "name":"white_bunny",
            "score":"90",
            "id":"002"        
        },{
            "name":"black_bunny",
            "score":"40",
            "id":"003"        
        }
    ];
    $scope.id = 4;
    $scope.insertDog = function(){
        if( $scope.id < 10){
            $scope.id = "00"+$scope.id; 
        }else if($scope.id<100){
            $scope.id = "0"+$scope.id; 
        }else{
            $scope.id = $scope.id; 
        }
        $scope.name.splice($scope.name.length,0,{"name":"code_dog","score":"101","id":$scope.id}); 
        $scope.id ++;
    };
    $scope.delLast = function(){
        $scope.name.splice(-1,1);
    }
});
</script>
<div ng-controller="myCtrl">
<ul>
    <li ng-repeat="list in name">
        <span class='index'>{{$index+1}}</span>
        <span class="name">{{list.name}}</span>
        <span class="score">{{list.score}}</span>
        <span class="id">{{list.id}}</span>
    </li> 
</ul>
<button ng-click="insertDog()">添加</button>
<button ng-click="delLast()">删除</button>
</div>
</body>
$index是迭代的索引值,表示当前迭代到第几条了.从0开始

 

标签：

相关文章