angular：操作dom，排序，时间控件

目录

使用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();    });