我有一个注册用户表,并希望通过单击其触发的模式显示他们的个人资料信息<a href="#">name<a>
。
下面是通过我的 Plunker工作的代码的一部分
正如我上面的代码一样,我目前正在使用 Bootstrap 执行模式,但是我正在将我们的很多项目转换为 Angular JS。任何熟悉如何执行此操作的 JS 编码人员?
在此先感谢达罗德
我有一个注册用户表,并希望通过单击其触发的模式显示他们的个人资料信息<a href="#">name<a>
。
下面是通过我的 Plunker工作的代码的一部分
正如我上面的代码一样,我目前正在使用 Bootstrap 执行模式,但是我正在将我们的很多项目转换为 Angular JS。任何熟悉如何执行此操作的 JS 编码人员?
在此先感谢达罗德
几周前我在博客上写过这个。我的博客文章包含一个 plunkr 示例,该示例使用 twitter 引导模式(并且没有额外的 UI 指令)几乎完全做到了这一点
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely
我不知道这是否会回答您的问题,但我使用 AngularJS 创建了一个 plunker 演示
http://plnkr.co/edit/bNzolsIIm5geRd05Jaq6
HTML 文件代码
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Dynamic User Profile Loading</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table >
<tr ng-repeat="user in users">
<td><a ng-click="getUserProfile(user)">{{user.username}}</a></td>
<td>{{user.profile.fullName}}</td>
<td>{{user.profile.email}}</td>
<td>{{user.profile.phone}}</td>
</tr>
</table>
</body>
</html>
Javascript代码
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.users =[{username: 'first'},{username: 'second'}, {username: 'third'},{username: 'fourth'}];
$scope.getUserProfile = function(user){
//Here we have received the user object so search for the object int he array
var inx = $scope.users.indexOf(user);
if(inx >= 0)
{
//retrieve user profile from server.
//Here we are going to set some values for the demo purpose
$scope.users[inx].profile = {}; //Initialize profile as an object
$scope.users[inx].profile.fullName = user.username + ' user';
$scope.users[inx].profile.email = user.username + '@example.com';
$scope.users[inx].profile.phone = user.username + ' phone';
}
};
});