angular增、删、改demo

生活有度,人生添寿。—— 书摘

前段时间,自己学习angularjs,看了看官方文档大概了解了一下。后来,感觉还是缺少磨炼于是网上找了个demo。麻雀虽小,五脏俱全。

原文地址:http://blog.csdn.net/hwhsong/article/details/54345868

使用之前,确定是否引入angular.js和angular-route.js脚本

这是,根据demo敲写的源码地址。

https://pan.baidu.com/s/1cEfdh0

提取密码:rhwr

从demo中学习到了,以下知识点。

1、路由配置

2、自定义过滤。在nba球员显示列表页面,需要对球员分类进行字符串替换,例如:voteFilters.js

/**

* Created by Administrator on 2017/3/7.

*/

angular.module("voteApp").filter("posFilter",function () {

return function (val) {

var pos = "Unkown";

switch (val){

case "PG":

pos = "控球后卫(PG)";

break;

case "SG":

pos = "得分后卫(SG)";

break;

case "SF":

pos = "小前锋(SF)";

break;

case "PF":

pos = "大前锋(PF)";

break;

case "C":

pos = "中锋(C)";

break;

default:

break;

}

return pos;

}

});

3、自定义指令,新增、编辑球员信息时,球员编号只能为0-99数字。

voteDirective.js

/**

* Created by Administrator on 2017/3/7.

*/

angular.module("voteApp").directive("valPlayerNum",function () {

return{

require:"ngModel",

link:function (scope, element, attr, mCtrl) {

function valPlayerNum(value) {

if(/^([1-9]\d|\d)$/.test(value)){

//设置错误的标志

mCtrl.$setValidity('playerNum',true);

}else {

mCtrl.$setValidity('playerNum',false);

}

return value;

}

mCtrl.$parsers.push(valPlayerNum);

}

}

})

4、表单验证,常用angular内置函数ng-show,以及$touched和$invalid属性。


必须填写球员姓名

5、服务注入,新增球员同时,需要验证球员名字是否已添加过。

voteService.js

/**

* 获取服务数据,将名字存入数组中

*/

angular.module("voteApp").service("voteSer",["$q","$http",function ($q, $http) {

this.getPlayerNames = function () {

return $http.get("data/players.json").then(function (resp) {

if (typeof resp.data === "object"){

var playerNames = [];

angular.forEach(resp.data,function (v, k) {

playerNames.push(v.name.toLowerCase());

})

return playerNames;

}else {

return $q.reject(resp.data);

}

},function (resp) {

return $q.reject(resp.status)

})

}

}])

Controller

voteController.js

function playerAddCtrl($scope,$http,$location,voteSer) {

//通过voteSer已经注入,可以直接调用

voteSer.getPlayerNames().then(function(data) {

//判断该球员姓名是否已存在

if(data.indexOf($scope.player.name) >= 0) {

$scope.isExisted = true;

}else {

//提交表单

$http.post("/backend/acitonUrl", $scope.player).then(function(resp) { //无论是否保存成功,都进行页面跳转

console.log("Saved Successfully! Status: " + resp.status);

$location.path("#/player/list");

}, function(resp) {

console.log("Saved Failly! Status: " + resp.status);

$location.path("#/player/list");

});

}

});

}

推荐阅读更多精彩内容