将对象传递给模板并在当前视图上呈现它

Question

有一个从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>

单击用户时,我想打开一个额外的视图,显示用户的一些详细信息.想象一下这样的观点

小蓝色区域是选定的用户,大蓝色区域是显示详细用户信息的容器.

function UserController($scope){
    $scope.select = function(user){
        console.log(user);
    }
}

因此,当单击用户时,我可以记录用户对象.它一直有效.但我绝对不知道如何打开充满用户数据的额外容器.

有没有办法简单地从文件系统加载模板,传递对象并将整个事物附加到当前视图？我怎么用angular.js做这个？

Answer 1

无需加载模板或任何东西.只需将数据放在范围内,并使用引用数据的大蓝色部分中的表达式.Angular将在更改选择时处理更改显示的内容.您可以使用ng-show隐藏相关部分,直到选中数据.

这是一个小提琴的例子.

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>

您可以突出显示具有类似ng-class或ng-style属性的相应小蓝框(例如ng-class ="{active:selectedUser == user}").请参阅有条件地应用课程的最佳方式是什么？