Angularjs 将对象传递到模板并在当前视图中渲染它
有一个从api加载的用户列表Angularjs 将对象传递到模板并在当前视图中渲染它,angularjs,angular-template,Angularjs,Angular Template,有一个从api加载的用户列表 <div ng:controller="UserController"> <li ng-repeat="user in users"> <a ng:click="select(user)"> {{user.first_name}} {{user.last_name}} </a> </li> </div> 因此,当用户被
<div ng:controller="UserController">
<li ng-repeat="user in users">
<a ng:click="select(user)">
{{user.first_name}} {{user.last_name}}
</a>
</li>
</div>
因此,当用户被单击时,我可以记录用户对象。它一直工作到这一点。但我完全不知道如何打开装满用户数据的额外容器
有没有一种方法可以简单地从文件系统加载模板,传递对象并将整个内容附加到当前视图中?如何使用angular.js实现这一点?无需加载模板或任何东西。只需将数据放在范围内,并使用蓝色区域中引用数据的表达式。Angular将在更改选择时处理更改显示内容的操作。可以使用ng show隐藏相关部分,直到选中数据 这是一个例子 及
用户1
用户2
{{selectedUser.name}
{{selectedUser.email}
可以突出显示具有类似ng类或ng样式属性(例如ng class=“{active:selectedUser==user}”)的相应蓝色小框。请参见
open
基于所示的有限细节,它非常主观。显示的布局可以像简单的选项卡一样设置,或者具有动画或。。。?更详细地解释预期的行为。什么是违约?第一用户?启动演示也会有所帮助。用户还需要设置书签的路由吗?试试这个。@charlietfl我真的不明白你的问题。。。单击用户列表项,一个div容器从左侧滑入,显示一些用户信息。我的问题很简单,如何定义这个“滑动div”(可能加载模板?)以及如何用角度用户对象填充它。@YahyaKACEM我认为折叠演示正好显示了我想要做的事情,但是折叠窗格的内容应该动态填充,谢谢,我需要:)或…
关于这种方法,我没有考虑的是状态纯粹存储在JavaScript变量中。例如,在页面刷新时,选定的用户将丢失。
function UserController($scope){
$scope.select = function(user){
console.log(user);
}
}
function UserController($scope){
$scope.users = [{name:'me',email:'mine'}, {name:'you',email:'yours'}];
$scope.selectedUser = null;
$scope.select = function(user){
$scope.selectedUser = user;
}
}
<div ng-controller="UserController">
<button class="btn" ng-click="select(users[0])">User 1</button>
<button class="btn" ng-click="select(users[1])">User 2</button>
<hr>
<div ng-show="selectedUser != null">
<div>{{selectedUser.name}}</div>
<div>{{selectedUser.email}}</div>
</div>