List with ajax-loading details in AngularJS

Question

For a list of items I want to show details after item click. Details will be loaded with ajax request. I have something similar to this: http://jsfiddle.net/asmKj/ How to modify this to work with details loaded dynamically?

For sure I have to prepare function in my controller like this:

$scope.getDetails = function (name) {
    return $scope.details = myService.getDetails(name).then(function (details) {
        return $scope.details = details;
    });
}

But how to bind this data to details div?

would be nice if you show us how details and showDetails are actually structured? and if it is possible to reorganize this structure... (if needed of course) — artur grzesiak
– artur grzesiak, Commented Dec 2, 2013 at 23:50
go through tutorial on docs site. It is perfect example of what you want — charlietfl
– charlietfl, Commented Dec 2, 2013 at 23:58

pasine · Accepted Answer · 2013-12-03 00:01:27Z

I would rather change with something like this:

HTML

<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="getDetails($index)">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-show="procedures.isVisible">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

JS

$scope.procedures = [
    {
        definition: 'Procedure 1',
        discharged: 23
    },
    {
        definition: 'Procedure 2',
        discharged: 2
    },
    {
        definition: 'Procedure 3',
        discharged: 356
    }
];

$scope.getDetails = function ($index) {
    $http.get('your-url').success(
       // use the data retrieved
       procedures[$index].isVisible = !procedures[$index].isVisible;
    );
}

artur grzesiak · Accepted Answer · 2013-12-02 23:56:17Z

1

There are basically two options.

Put everything in your procedure objects as separate properties (when the details are loaded) -- then you can just use procedure.showDetails in ng-repeat.
Use $index to get index from your procedures -- then you can use it to access any arbitrary collection from your scope in ng-repeat.

(may update my answer, when you provide more info about structure of your data; and if still needed)

answered Dec 2, 2013 at 23:56

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

List with ajax-loading details in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related