2

There is a list of users loaded from an 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>

When a user is clicked I want to open an extra view that shows some detailed information of the user. Imagine the view like this

enter image description here

The small blue area is the selected user and the big blue area the container that shows detailed user information.

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

So when the user is clicked I can log the user object. It works until this point. But I absolutely have no idea how to open the extra container filled with user data.

Is there a way to simply load a template from file system, pass the object and append the whole thing to the current view? How would I do this with angular.js?

DarkLeafyGreen
  • 69,338
  • 131
  • 383
  • 601
  • `open` is very subjective based on limited detail shown. Layout shown could be set up like simple tabs, or have animations or...? Explain behavior expected in more detail. What will default be? First user? A starting demo would also help. Also do users need to be set with routing for bookmarks? – charlietfl Apr 12 '13 at 23:03
  • try this [angular-ui/bootstrap/popover](http://angular-ui.github.io/bootstrap/#/popover). – Yahya KACEM Apr 12 '13 at 23:08
  • @charlietfl I did not really get your question... You click on the user list item and a div container slides in from the left showing some user information. My question is simply, how to define this "sliding div" (maybe load a template?) and how to fill it with the angular user object. – DarkLeafyGreen Apr 12 '13 at 23:11
  • @YahyaKACEM I think the collapse demo shows exactly what I want to do http://angular-ui.github.io/bootstrap/#/collapse However contents of the collapsed pane should be filled dynamically – DarkLeafyGreen Apr 12 '13 at 23:13

1 Answers1

6

No need to load templates or anything. Just put the data in the scope, and use expressions in the big blue section that reference the data. Angular will handle changing the displayed content when the selection is changed. You can hide the relevant section with ng-show until the data get selected.

Here's a 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;
    }
}

and

<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>

You could highlight the corresponding small blue box with a similar ng-class or ng-style attribute (e.g. ng-class="{active: selectedUser == user}"). See What is the best way to conditionally apply a class?

Community
  • 1
  • 1
mfelix
  • 1,834
  • 17
  • 18