<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span type="text">欢迎您:<span class="hidden-xs" >{{username}}</span></span>
</a>
$scope.login=function (username,password,check) {
if(username && password && check) {
userService.login(username, password,check).success(
function (response) {
if (response.flag) {
$scope.userInfo=response.data;
$scope.name=$scope.userInfo.name;
var roleName = $scope.userInfo.roleName;
if(roleName=='农户'){
location.href = "admin/index2.html";
}
if(roleName=='区管理员'){
location.href = "admin/index3.html";
}
if(roleName=='管理员'){
$scope.agriForm={
show:true
};
location.href = "admin/index.html";
}
} else {
alert(response.errorMsg);
}
}
)
}else{
alert("请输入用户名和密码");
}
}
使用 AngularJS 进行登录,并将用户名显示在页面上的步骤如下:
在 HTML 中添加对应的元素,用于显示用户名:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span type="text">欢迎您:<span class="hidden-xs">{{name}}</span></span>
</a>
在控制器中定义 $scope.name 变量,并将其初始化为空字符串:
$scope.name = '';
修改登录函数,在成功登录后将用户名赋值给 $scope.name 变量:
function(username,password,check) {
if(username && password && check) {
userService.login(username, password,check).success(
function (response) {
if (response.flag) {
$scope.userInfo=response.data;
$scope.name = $scope.userInfo.name;
// 其他代码...
} else {
alert(response.errorMsg);
}
}
);
} else{
alert("请输入用户名和密码");
}
}
在登录成功后,通过给 $scope.name 赋值,可以将用户名显示在页面上。请确保后台接口返回的数据中包含了用户的姓名信息,并正确获取和赋值给 $scope.name 变量。
需要注意的是,你的代码片段中有一部分逻辑是通过修改 location.href 来跳转到不同的页面,这种方式不符合 AngularJS 的单页应用原则,推荐使用 AngularJS 提供的路由模块(例如 ngRoute 或 ui-router)进行页面之间的跳转。