Showing and hiding elements with angular

Showing and hiding elements in one of the basic task for front-end development. With angular you have two directives wich you can use for showing and hiding element: ng-hide and ng-show. NG-hide and ng-show just takes a boolean to show or hide the decorated element. So this can be enough to hide a element:

    <div ng-show="false" >
        <h1>Klant details</h1>

But a more ordened way is to use a boolean in your model, like this:

    <div ng-show="klant.selected" >
        <h1>Klant details</h1>

Now is the element visible depending of the value of the selected boolean in your model. You can use the ng-click directive from angular to show the element

<a href=\"#\" ng-click="selectKlant($index)" >
    <h4 >{{klant.bedrijfsnaam}}</h4>
    <div ng-show="klant.selected" >
        <h1>Klant details</h1>

In you model you now need to have a selectKlant function wich set the boolean true for the selected element, int this case I use the index to query:

    $scope.selectKlant = function(klantIndex)
            $scope.klanten[klantIndex].selected = true;




Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!