自己练习的一些应该熟记的代码
$scope.$apply的用法和$scope.$watch的用法：
var yanApp = angular.module('yanApp',[]) .controller('first',function($scope){ $scope.name='yanjinyun'; $scope.count=0; /*setInterval(function(){ $scope.$apply(function(){ $scope.name = new Date(); }) },2000);*/ $scope.$watch('name',function(){ var ss=$scope.count++; if(ss>10){ alert('hellor world'); } }) });
两个控制器共享一个对象的代码
angular.module('myApp',[]) .factory('Data',function(){ return {message:'111'}; }) .controller('firstController',function($scope,Data){ //alert(Data.message); $scope.Data = Data; }) .controller('secondController',function($scope,Data){ $scope.Data = Data; });
angular常用的table和select
<body>
<div ng-app='yanApp' ng-controller='yanController'>
<table>
<tr ng-repeat='x in names'>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</table>
<hr/>
<select ng-model="selectedName" ng-options="x.name for x in names">
</select>
<div>{{selectedName}}</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('yanApp',[]);
function yanFirstController($scope){
$scope.names = [
{'name':'yan1','age':'1'},
{'name':'yan2','age':'2'},
{'name':'yan3','age':'3'},
{'name':'yan4','age':'4'},
{'name':'yan5','age':'5'}
];
}
app.controller('yanController',['$scope',yanFirstController]);
</script>
模板 table中简单的函数的编写，特别注意最后的watch中的true这个。
var findIndex = function(id){ var index = -1; angular.forEach($scope.cart,function(item,key){ if(item.id==id){ index = key; return; } }); return index; } $scope.remove = function(id){ var index = findIndex(id); if(index > -1){ $scope.cart.splice(index, 1); } } $scope.totalPrice = function(){ var price = 0; angular.forEach($scope.cart,function(item){ price += item.quantity * item.price; }); return price; } /** * 计算总购买数 */ $scope.totalQuantity = function () { var total = 0; angular.forEach($scope.cart, function (item) { total += parseInt(item.quantity); }) return total; } $scope.reduce = function(id){ var index = findIndex(id); if(index > -1){ if($scope.cart[index].quantity > 0){ $scope.cart[index].quantity--; }else{ var returnKey = confirm('是否从购物车内删除该产品!'); if(returnKey){ $scope.remove(id); } } } } $scope.$watch('cart',function(newV,oldV){ angular.forEach(newV,function(item,key){ if(item.quantity<1){ var ss = confirm('是否从购物车内删除该产品'); if(ss){ $scope.remove(item.id); }else{ item.quantity = oldValue[key].quantity; } } }); },true);
城市下拉列表双向关联：
<div ng-app="yanApp" style="margin-top: 100px;">
<form name="myForm" action="kittencup.php" ng-controller="yanController" class="container form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">出生地</label>
<div class="col-sm-3">
<select class="form-control" ng-change="data.area = false" ng-model="data.province" ng-options="x.id as x.name for x in cities | cityFilter:0"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="data.province" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityFilter:data.province"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-required="true" ng-show="data.province && data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityFilter:data.area"></select>
</div>
</div>
</form>
</div>
var app = angular.module('yanApp',[]);
function yanFirstController($scope){
$scope.cities = [
{
name: '上海',
parent: 0,
id: 1
},
{
name: '上海市',
parent: 1,
id: 2
},
{
name: '徐汇区',
parent: 2,
id: 8
},
{
name: '长宁区',
parent: 2,
id: 3
},
{
name: '北京',
parent: 0,
id: 4
},
{
name: '北京市',
parent: 4,
id: 5
},
{
name: '东城区',
parent: 5,
id: 6
},
{
name: '丰台区',
parent: 5,
id: 7
},
{
name: '浙江',
parent: 0,
id: 9
},
{
name: '杭州',
parent: 9,
id: 100
},
{
name: '宁波',
parent: 9,
id: 11
},
{
name: '西湖区',
parent: 100,
id: 12
},
{
name: '北仑区',
parent: 11,
id: 13
}
];
// 让城市关联使用
this.findCityId = function (parent) {
var parentId;
angular.forEach($scope.cities, function (city) {
if (city.id === parent) {
parentId = city.parent;
return;
}
})
return parentId;
}
// 第一次打开页面 需要初始化一下
$scope.data = {
hobbies: [1, 2],
city: 1
};
this.initCity = function(){
if ($scope.data.city !== undefined) {
$scope.data.area = this.findCityId($scope.data.city);
$scope.data.province = this.findCityId($scope.data.area);
}
}
this.initCity.call(this);
// 先保留一份默认值
$scope.origData = angular.copy($scope.data);
}
function cityFilter(){
return function (data, parent) {
var filterData = [];
angular.forEach(data, function (obj) {
if (obj.parent === parent) {
filterData.push(obj);
}
})
return filterData;
}
}
app.controller('yanController',['$scope',yanFirstController])
.filter('cityFilter',cityFilter);
//reset事件：
var that = this;
// 第一次打开页面 需要初始化一下
$scope.data = {
hobbies: [1, 2],
city: 3
};
$scope.origData = angular.copy($scope.data);
$scope.reset = function(){
$scope.data = angular.copy($scope.origData);
that.initCity();
//$scope.myForm.$setPristine();
}
浙公网安备 33010602011771号