angularjs - 将对象传递给模板并将其渲染在当前 View 上

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>

当单击用户时，我想打开一个额外的 View ，显示用户的一些详细信息。想象一下这样的 View

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

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

因此，当单击用户时，我可以记录用户对象。直到此时为止。但我完全不知道如何打开装满用户数据的额外容器。

有没有一种方法可以简单地从文件系统加载模板，传递对象并将整个对象附加到当前 View ？我该如何使用 angular.js 来做到这一点？

Answer 1

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

这是一个fiddle example .

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}")。请参阅What is the best way to conditionally apply a class?