zoukankan      html  css  js  c++  java
  • angular对DOM进行添加删除

    <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开始
  • 相关阅读:
    pycharm过期后,修改hosts文件?
    三种格式化方式
    virtualenv安装及使用
    二分查找以及单例模式
    目录总览
    SQLAlchemy
    Redis
    linux 安装虚拟机
    shell基本命令
    Linux 命令大全
  • 原文地址:https://www.cnblogs.com/lcx90/p/5666795.html
Copyright © 2011-2022 走看看