一次又一次的棱角分明，页面加载 [英] Angular , page loads again and again
本文介绍了一次又一次的棱角分明，页面加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有angularjs的一个简单的项目。
问题
登录时，我重定向到的login.html后，它不断地发送请求和页面被一次又一次地重新加载
请帮忙以下是code
demoangular.js
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML数据-NG-应用=customerApp＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;角JS＆LT; /标题＆GT; ＆LT;脚本SRC =脚本/ jQuery的-1.8.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/角route.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;
＆LT; DIV数据-NG-视图=＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT; ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
hello.html的
＆LT; H1＆GT;欢迎角度＆LT; / H1＆GT;
＆LT;表ID =main的数据-NG-提交=登录（）＆GT;
＆LT;输入名称=名字ID =用户类型=文本数据-NG-模式=cardentials.username要求/＆GT;
＆LT;输入名称=URLID =通TYPE =密码数据-NG-模式=cardentials.password要求/＆GT; ＆LT;按钮和GT;新＆LT; /按钮＆GT;
＆LT; /表及GT;
logout.html
＆LT;脚本SRC =脚本/ jQuery的-1.8.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ angular.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;风格＆GT;
#mydiv {
位置：绝对的;
顶部：0;
左：0;
宽度：100％;
高度：100％;
的z-index：1000;
背景颜色：灰色;
不透明度：0.8;
} 阿贾克斯装载机{
位置：绝对的;
左：50％;
顶部：50％;
保证金左：-32px; / * -1 *图像宽度/ 2 * /
的margin-top：-32px; / * -1 *图像高度/ 2 * /
显示：块;
}
＆LT; /风格＆GT; ＆LT;按钮式=按钮数据-NG-点击=退出（）＆GT;注销＆LT; /按钮＆GT;
＆LT; DIV数据-NG-控制器=CustomersController级=容器＆GT; ＆LT;强类=错误＆GT; {{错误}}＆LT; / STRONG＆GT;
＆LT;！ - ＆LT; DIV ID =mydiv数据-NG-秀=加载＆GT;
＆LT; IMG SRC =图像/ 482.gif级=AJAX装载/＆GT;
＆LT; / DIV＆GT; - ＆GT;
＆LT; P数据-NG-隐藏=addMode＆GT;
＆LT;数据-NG-点击=toggleAdd（）的href =JavaScript的:;类=BTN BTN-主要＆gt;添加新＆LT; / A＆GT; ＆所述; / P＆GT;
＆LT;表格名称=addCustomer数据-NG-秀=addMode的风格=WIDTH：600px的;保证金：0px auto的;＆GT;
＆LT;标签＆gt;名称：LT; /标签＆gt;＆LT;输入类型=文本数据-NG-模式=newcustomer.Name要求/＆GT;
＆LT;标签＆gt;电子邮件：＆LT; /标签＆gt;＆LT;输入类型=电子邮件数据-NG-模式=newcustomer.Email要求/＆GT;
＆LT; BR /＆GT;
＆LT;跨度类=错误数据-NG-秀=$ addCustomer error.email。＆GT;无效的电子邮件格式＆LT;！/ SPAN＆GT;
＆LT; BR /＆GT;
＆LT;输入类型=提交值=添加数据-NG-点击=增加（）的数据-NG-禁用= CLASS =BTN BTN-主要/＆GTaddCustomer $有效！
＆LT;输入类型=按钮值=取消数据-NG-点击=toggleAdd（）级=BTN BTN-主要/＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; /表及GT;
＆LT;表类=表表边框的表格悬停的风格=宽度：800像素＆GT;
＆所述; TR＆GT;
＆LT;第i＃ID＆LT; /第i
＆LT;第i个姓名和LT; /第i
＆LT;第i个电子邮件和LT; /第i
百分位＆GT;＆LT; /第i
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本数据-NG-模式=search.Name/＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本数据-NG-模式=search.Email/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆LT; TR数据-NG-重复=客户的客户|过滤器：搜索＆GT;
＆LT; TD＆GT;＆LT;强大的数据NG隐藏=customer.editMode＆GT; {{客户。}}＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT; {{customer.Name}}＆LT; / P＆GT;
＆LT; P数据-NG-秀=customer.editMode＆GT;
＆LT;输入类型=文本数据-NG-模式=customer.Name/＆GT;
＆所述; / P＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT; {{customer.Email}}＆LT; / P＆GT;
＆LT;输入数据-NG-秀=customer.editMode类型=文本数据-NG-模式=customer.Email/＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT;＆LT;数据-NG-点击=toggleEdit（客户）的href =JavaScript的：;＆gt;编辑＆LT; / A＆GT; | ＆下;一个数据纳克点击=delcustomer（客户）的href =JavaScript的：;＆GT;删除＆下; / A＆GT;＆下; / P＆GT;
＆LT; P数据-NG-秀=customer.editMode＆GT;＆LT;数据-NG-点击=保存（客户）的href =JavaScript的：;＆GT;保存＆LT; / A＆GT; | ＆LT;数据-NG-点击=toggleEdit（客户）的href =JavaScript的：;＆GT;取消＆LT; / A＆GT;＆LT; / P＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;小时/＆GT;
＆LT; / DIV＆GT;
app.js
VAR demoapp = angular.module（'customerApp'，['ngRoute']）;
demoapp.config（函数（$ routeProvider）{
$ routeProvider.when（'/你好'，{
控制器：'SimpleController'，
templateUrl：'谐音/ hello.html的
}）;
$ routeProvider.when（'/注销'，{
控制器：'newController'，
templateUrl：/logout.html
}）;
$ routeProvider.otherwise（{redirectTo：'/你好'}）;
}）;demoapp.factory（authser功能（$位置$ HTTP）{
返回{
登录：功能（cardentials）{
如果（cardentials.username！=小额）{
警报（公司）;
}
其他{ $ location.path（'/注销'）; }
}，
注销：功能（）{
$ location.path（'/你好'）;
}
}
}）demoapp.controller（'SimpleController'，函数（$范围，authser）{
$ scope.cardentials = {用户名：密码：}; $ scope.login =功能（）{
authser.login（$ scope.cardentials）;
};}）;
demoapp.controller（'newController'，函数（$范围，authser）{
$ scope.logout =功能（）{
authser.logout（）; };
}）;
VAR URL ='API /客户/';demoapp.factory（'customerFactory'，函数（$ HTTP）{
返回{
getCustomer：功能（）{
返回$ http.get（URL）;
}，
addCustomer：函数（客户）{
返回$ http.post（URL，客户）;
}，
deleteCustomer：函数（客户）{
返回$ http.delete（URL + customer.CustomerID）;
}，
updateCustomer：函数（客户）{
返回$ http.put（URL + customer.Id，客户）;
}
};
}）;demoapp.controller（'CustomersController'，功能PostsController（$范围，customerFactory）{
$ scope.customers = [];
$ scope.loading = TRUE;
$ scope.addMode = FALSE; $ scope.toggleEdit =功能（）{
！this.customer.editMode = this.customer.editMode;
};
$ scope.toggleAdd =功能（）{
$ scope.addMode = $ scope.addMode！;
};
$ scope.save =功能（）{
//$scope.loading = TRUE;
VAR卡斯特= this.customer;
customerFactory.updateCustomer（卡斯特）.success（功能（数据）{
警报（保存成功！）;
cust.editMode = FALSE;
$ scope.loading = FALSE;
}）错误（功能（数据）{
$ scope.error =发生错误，同时节省客户！+ data.ExceptionMessage;
$ scope.loading = FALSE; }）;
}; //添加客户
$ scope.add =功能（）{
$ scope.loading = TRUE;
customerFactory.addCustomer（this.newcustomer）.success（功能（数据）{
警报（添加成功！）;
$ scope.addMode = FALSE;
$ scope.customers.push（数据）;
$ scope.loading = FALSE;
}）错误（功能（数据）{
$ scope.error =，同时增加客户出错了！+ data.ExceptionMessage;
$ scope.loading = FALSE; }）;
};
//删除客户
$ scope.delcustomer =功能（）{
$ scope.loading = TRUE;
VAR currentCustomer = this.customer;
customerFactory.deleteCustomer（currentCustomer）.success（功能（数据）{
警报（删除成功！）;
$。每个（$ scope.customers，功能（我）{
如果（$ scope.customers [I] .CustomerID === currentCustomer.CustomerID）{
$ scope.customers.splice（I，1）;
返回false;
}
}）;
$ scope.loading = FALSE;
}）错误（功能（数据）{
$ scope.error =发生错误，同时节省客户！+ data.ExceptionMessage;
$ scope.loading = FALSE; }）;
}; //获取所有客户
customerFactory.getCustomer（）。成功（功能（数据）{
$ scope.customers =数据;
$ scope.loading = FALSE;
}）
.error（功能（数据）{
$ scope.error =发生错误而载入站！+ data.ExceptionMessage;
$ scope.loading = FALSE;
}）;}）;
解决方案
解决它
更新logout.html
@callmekatootie感谢您的帮助
kudoo
＆LT;风格＆GT;
#mydiv {
位置：绝对的;
顶部：0;
左：0;
宽度：100％;
高度：100％;
的z-index：1000;
背景颜色：灰色;
不透明度：0.8;
} 阿贾克斯装载机{
位置：绝对的;
左：50％;
顶部：50％;
保证金左：-32px; / * -1 *图像宽度/ 2 * /
的margin-top：-32px; / * -1 *图像高度/ 2 * /
显示：块;
}
＆LT; /风格＆GT; ＆LT;按钮式=按钮数据-NG-点击=退出（）＆GT;注销＆LT; /按钮＆GT;
＆LT; DIV数据-NG-控制器=CustomersController级=容器＆GT; ＆LT;强类=错误＆GT; {{错误}}＆LT; / STRONG＆GT;
＆LT;！ - ＆LT; DIV ID =mydiv数据-NG-秀=加载＆GT;
＆LT; IMG SRC =图像/ 482.gif级=AJAX装载/＆GT;
＆LT; / DIV＆GT; - ＆GT;
＆LT; P数据-NG-隐藏=addMode＆GT;
＆LT;数据-NG-点击=toggleAdd（）的href =JavaScript的:;类=BTN BTN-主要＆gt;添加新＆LT; / A＆GT; ＆所述; / P＆GT;
＆LT;表格名称=addCustomer数据-NG-秀=addMode的风格=WIDTH：600px的;保证金：0px auto的;＆GT;
＆LT;标签＆gt;名称：LT; /标签＆gt;＆LT;输入类型=文本数据-NG-模式=newcustomer.Name要求/＆GT;
＆LT;标签＆gt;电子邮件：＆LT; /标签＆gt;＆LT;输入类型=电子邮件数据-NG-模式=newcustomer.Email要求/＆GT;
＆LT; BR /＆GT;
＆LT;跨度类=错误数据-NG-秀=$ addCustomer error.email。＆GT;无效的电子邮件格式＆LT;！/ SPAN＆GT;
＆LT; BR /＆GT;
＆LT;输入类型=提交值=添加数据-NG-点击=增加（）的数据-NG-禁用= CLASS =BTN BTN-主要/＆GTaddCustomer $有效！
＆LT;输入类型=按钮值=取消数据-NG-点击=toggleAdd（）级=BTN BTN-主要/＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; /表及GT;
＆LT;表类=表表边框的表格悬停的风格=宽度：800像素＆GT;
＆所述; TR＆GT;
＆LT;第i＃ID＆LT; /第i
＆LT;第i个姓名和LT; /第i
＆LT;第i个电子邮件和LT; /第i
百分位＆GT;＆LT; /第i
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本数据-NG-模式=search.Name/＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=文本数据-NG-模式=search.Email/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆LT; TR数据-NG-重复=客户的客户|过滤器：搜索＆GT;
＆LT; TD＆GT;＆LT;强大的数据NG隐藏=customer.editMode＆GT; {{客户。}}＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT; {{customer.Name}}＆LT; / P＆GT;
＆LT; P数据-NG-秀=customer.editMode＆GT;
＆LT;输入类型=文本数据-NG-模式=customer.Name/＆GT;
＆所述; / P＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT; {{customer.Email}}＆LT; / P＆GT;
＆LT;输入数据-NG-秀=customer.editMode类型=文本数据-NG-模式=customer.Email/＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; P数据-NG-隐藏=customer.editMode＆GT;＆LT;数据-NG-点击=toggleEdit（客户）的href =JavaScript的：;＆gt;编辑＆LT; / A＆GT; | ＆下;一个数据纳克点击=delcustomer（客户）的href =JavaScript的：;＆GT;删除＆下; / A＆GT;＆下; / P＆GT;
＆LT; P数据-NG-秀=customer.editMode＆GT;＆LT;数据-NG-点击=保存（客户）的href =JavaScript的：;＆GT;保存＆LT; / A＆GT; | ＆LT;数据-NG-点击=toggleEdit（客户）的href =JavaScript的：;＆GT;取消＆LT; / A＆GT;＆LT; / P＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;小时/＆GT;
＆LT; / DIV＆GT;
i have a simple project of angularjs.
Problem after login when i redirected to login.html , it continuously sends request and page is reloaded again and again
please help following is code
demoangular.js
<!DOCTYPE html>
<html data-ng-app="customerApp">
<head>
<title>Angular js</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script>
</script>
</body>
</html>
HEllo.html
<h1>Welcome To Angular</h1>
<form id="main" data-ng-submit="login()">
<input name="name" id="user" type="text" data-ng-model="cardentials.username" required />
<input name="url" id="pass" type="password" data-ng-model="cardentials.password" required />
<button>new</button>
</form>
logout.html
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
app.js
var demoapp = angular.module('customerApp', ['ngRoute']);
demoapp.config(function ($routeProvider) {
$routeProvider.when('/hello', {
controller: 'SimpleController',
templateUrl: 'partials/hello.html'
});
$routeProvider.when('/logout', {
controller: 'newController',
templateUrl: '/logout.html'
});
$routeProvider.otherwise({ redirectTo: '/hello' });
});
demoapp.factory("authser", function ($location, $http) {
return {
login: function (cardentials) {
if (cardentials.username != "jot") {
alert("its ");
}
else {
$location.path('/logout');
}
},
logout: function () {
$location.path('/hello');
}
}
})
demoapp.controller('SimpleController', function ($scope, authser) {
$scope.cardentials = { username: "", password: "" };
$scope.login = function () {
authser.login($scope.cardentials);
};
});
demoapp.controller('newController', function ($scope, authser) {
$scope.logout = function () {
authser.logout();
};
});
var url = 'api/Customers/';
demoapp.factory('customerFactory', function ($http) {
return {
getCustomer: function () {
return $http.get(url);
},
addCustomer: function (customer) {
return $http.post(url, customer);
},
deleteCustomer: function (customer) {
return $http.delete(url + customer.CustomerID);
},
updateCustomer: function (customer) {
return $http.put(url + customer.Id, customer);
}
};
});
demoapp.controller('CustomersController', function PostsController($scope, customerFactory) {
$scope.customers = [];
$scope.loading = true;
$scope.addMode = false;
$scope.toggleEdit = function () {
this.customer.editMode = !this.customer.editMode;
};
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
$scope.save = function () {
//$scope.loading = true;
var cust = this.customer;
customerFactory.updateCustomer(cust).success(function (data) {
alert("Saved Successfully!!");
cust.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// add Customer
$scope.add = function () {
$scope.loading = true;
customerFactory.addCustomer(this.newcustomer).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.customers.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Adding customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
// delete Customer
$scope.delcustomer = function () {
$scope.loading = true;
var currentCustomer = this.customer;
customerFactory.deleteCustomer(currentCustomer).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.customers, function (i) {
if ($scope.customers[i].CustomerID === currentCustomer.CustomerID) {
$scope.customers.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
$scope.loading = false;
});
};
//get all Customers
customerFactory.getCustomer().success(function (data) {
$scope.customers = data;
$scope.loading = false;
})
.error(function (data) {
$scope.error = "An Error has occured while loading posts! " + data.ExceptionMessage;
$scope.loading = false;
});
});
解决方案
Solved it
updated logout.html
@callmekatootie thanks for your help kudoo
<style>
#mydiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
</style>
<button type="button" data-ng-click="logout()">logout</button>
<div data-ng-controller="CustomersController" class="container">
<strong class="error">{{ error }}</strong>
<!--<div id="mydiv" data-ng-show="loading">
<img src="Images/482.gif" class="ajax-loader" />
</div>-->
<p data-ng-hide="addMode">
<a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>
</p>
<form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
<label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
<label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
<br />
<span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
<br />
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
<br />
<br />
</form>
<table class="table table-bordered table-hover" style="width: 800px">
<tr>
<th>#id</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
<tr>
<td></td>
<td>
<input type="text" data-ng-model="search.Name" /></td>
<td>
<input type="text" data-ng-model="search.Email" /></td>
<td></td>
</tr>
<tr data-ng-repeat="customer in customers | filter:search">
<td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<p data-ng-show="customer.editMode">
<input type="text" data-ng-model="customer.Name" />
</p>
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
这篇关于一次又一次的棱角分明，页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
