点击Result查看效果。
分类目录归档:AngularJS
Angular简单的判断情况绑定数据 AngularJS simple conditional binding
在AngularJS的使用$apply更新model
先看一个不能work的
如果ng-app和ng-controller写在一个dom里,这样就不能更新model里的值
分开写就没问题
解决这个问题可以这样:
当然也可以这样:
function Ctrl($scope) { $scope.message = "Waiting 2000ms for update"; setTimeout(function () { $scope.message = "Timeout called!"; $scope.$apply(); }, 2000); }
AngularJs分页pagination directive
html
<div ng-app="hello"> <div ng-controller="pagingCtrl"> <paging> <table class="table table-striped table-bordered table-hover"> <tr> <th>id</th> <th>name</th> </tr> <tr ng-repeat="item in data"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </table> <ul class="pagination" num-pages="tasks.pageCount" current-page="tasks.currentPage" on-select-page="selectPage(page)"> <li ng-class="{disabled: noPrevious()}"> <a ng-click="selectPrevious()">«</a> </li> <li ng-repeat="page in pages" ng-class="{active: isActive(page)}"> <a ng-click="selectPage(page)">{{page}}</a> </li> <li ng-class="{disabled: noNext()}"> <a ng-click="selectNext()">»</a> </li> </ul> </paging> </div> </div>
js
var myModule = angular.module('hello', []);
myModule.controller('pagingCtrl', function ($scope, $http) {
$scope.data = [{
id: 1,
name: "a"
}, {
id: 2,
name: "b"
}];
$scope.currentPage = 1;
$scope.numPages = 5;
$scope.pageSize = 10;
$scope.pages = [];
//get first page
/*$http.get('url',
{
method: 'GET',
params: {
'pageNo': $scope.currentPage,
'pageSize': $scope.pageSize
},
responseType: "json"
}).then(function (result) {
$scope.data = result.data.Data;
$scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
});*/
$scope.onSelectPage = function (page) {
//replace your real data
/*$http.get('url',
{
method: 'GET',
params: {
'pageNo': page,
'pageSize': $scope.pageSize
},
responseType: "json"
}).then(function (result) {
$scope.data = result.data.Data;
$scope.numPages = Math.ceil(result.data.Total / result.data.PageSize);
});*/
};
});
myModule.directive('paging', function () {
return {
restrict: 'E',
//scope: {
// numPages: '=',
// currentPage: '=',
// onSelectPage: '&'
//},
template: '',
replace: true,
link: function (scope, element, attrs) {
scope.$watch('numPages', function (value) {
scope.pages = [];
for (var i = 1; i <= value; i++) {
scope.pages.push(i);
}
alert(scope.currentPage)
if (scope.currentPage > value) {
scope.selectPage(value);
}
});
scope.isActive = function (page) {
return scope.currentPage === page;
};
scope.selectPage = function (page) {
if (!scope.isActive(page)) {
scope.currentPage = page;
scope.onSelectPage(page);
}
};
scope.selectPrevious = function () {
if (!scope.noPrevious()) {
scope.selectPage(scope.currentPage - 1);
}
};
scope.selectNext = function () {
if (!scope.noNext()) {
scope.selectPage(scope.currentPage + 1);
}
};
scope.noPrevious = function () {
return scope.currentPage == 1;
};
scope.noNext = function () {
return scope.currentPage == scope.numPages;
};
}
};
});