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