angular:操作dom,排序,时间控件

本文介绍如何使用Angular实现DOM元素的动态增删与排序,包括具体的前端HTML代码与JS逻辑实现,同时还展示了时间控件的使用及自定义过滤器的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

使用angular进行动态删除和增加dom

前端html代码;

1.首先是操作dom,通常是通过使用 ng-repeat+数组删减操作dom

 <button class="btn btn-default"
                type="button"
                ng-click="info.add(1)">增加</button> 
        <button class="btn btn-default"
                type="button"
                ng-click="info.delete(0)" >删除</button>
        <button class="btn btn-default"
                type="button"
                ng-click="results()" >result</button>

<div ng-repeat="domain in info.operate"> 
<div class="form-group">
<label class="control-label col-sm-1" >表格{{$index + 1}}</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="domain.value"  />
</div>
<div class="col-sm-2">
<button class="btn btn-default"
type="button" ng-click="info.add($index)">增加</button>

<button class="btn btn-default"
         type="button" ng-click="info.delete($index)"
           >删除</button>
</div>
</div>
</div>

js代码:

 $scope.info = {};
    $scope.info.operate = [

    ];
    // 增加
    $scope.info.add = function($index) {
        $scope.info.operate.splice($index + 1, 0, {key: $index + 1, value: ""});
    };
    // 删除
    $scope.info.delete = function($index) {
        $scope.info.operate.splice($index, 1);
    };
     // 查看所有的输入框的
    $scope.results=function () {
        console.log( $scope.info.operate[0]);
        console.log( $scope.info.operate[1]);
        console.log( $scope.info.operate[2]);
    }

排序

html代码

<button ng-click='changeOrder("age")' >点击实现排序height</button>
 <button ng-click='changeOrder("height")' >点击实现排序age</button>

<tr ng-repeat="item in data | orderBy:sort:desc">
<td><span ng-bind="item.age"></span></td>
<td><span ng-bind="item.height"></span></td>
<td><span ng-bind="item.name | filterOne : item.name "></span></td>
</tr> 

js代码:

通常通过改变 ng-repeat的排序元素和 如何排序使用变量替代,通过改变 变量值改变 排序的方式
angular中都是通过 改变 变量值,来操作dom以及显示

var dataList=[{   // json格式数据,方便操作
        name:'mary',
        age:24,
        sex:'female',
        height:'170cm' 
    }];
    $scope.data=dataList;
    $scope.sort='age';
    $scope.desc=true;
    $scope.changeOrder=function(type){
        $scope.sort=type;
        $scope.desc=!$scope.desc;
    };

自定义过滤器:

//过滤器
    app.filter('filterOne',function(){
               // str是你传入的值,需要过滤或者进行操作的
        return function(str,filterString){
            //可以对filterString 进行操作
            return str+'mail';
        }
    })

angular中使用时间控件

前端代码:

 <div class='input-group date' datetimepicker  id='datetimepicker1'>
<input type='text' class="form-control"  ng-model="dateOne"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span></div>

js时间控件:

最重要的还是要引入js文件,需要自己去下载

<link rel="stylesheet" href="bootstrap-datetimepicker.css" type="text/css" />
<script src="moment.js"></script>
<script src="moment-with-locales.js"></script>
<script src="bootstrap-datetimepicker.js"></script>
// 以上三个文件全是在git上下载的

 //在Controller中绑定时间控件选择控件
    var datepicker1 = $('#datetimepicker1').datetimepicker({
        format: 'yyyy-mm-dd',
        locale: moment.locale('zh-cn')
    }).on('dp.change', function (e) {
        var result = new moment(e.date).format('yyyy-mm-dd');
        $scope.dateOne = result;
        $scope.$apply();
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值