Développer développer bouton dans Angular JS

Question

Je cherche à développer un tableau de bord dans Angular JS et la recherche d'entrée. J'ai une référence montrée dans la capture d'écran ci-dessous. J'ai mis en surbrillance les boutons qui se développent et montrent la vue détaillée.

Je veux développer quelque chose de similaire à cela. Qu'est-ce que ce bouton appelé dans Angular JS? Tous les pointeurs ou docs sont très appréciés. Une liste de tous les boutons ou des choses liées à l'interface utilisateur serait également très utile.

Answer 1

créer et utiliser une directive pour faire peu la même chose

http://plnkr.co/edit/Itm6gdFbi6P7J1LvdXj7?p=preview

la directive

// Declare the main module 
var myApp = angular.module('myApp', []); 

angular.module('myApp').directive('dir.showhide', function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope: { dswitch: "=", 
       dshowmessage: '@' , // the message displayed in the button 
       dhidemessage :'@', // the message displayed in the button 
       dshowmessagehover: '@' , //the message displayed on hover the button 
       dhidemessagehover :'@'},//the message displayed on hover the button 
     plain : true , 
     template: '<div> <button class="btn btn-default btn-xs" type="button" ng-click="dswitch=true" ng-hide="dswitch" tooltip-popup-delay="500" '+ 
      'tooltip-placement="right" uib-tooltip="{{dshowmessagehover}}"> <span class="glyphicon glyphicon-eye-open">{{dshowmessage}}</span> </button>'+ 
      ' <button class="btn btn-default btn-xs" type="button" ng-click="dswitch=false" ng-hide="!dswitch" tooltip-popup-delay="500" tooltip-placement="right" '+ 
      ' uib-tooltip="{{dhidemessagehover}}"> <span class="glyphicon glyphicon-eye-close">{{dhidemessage}}</span> </button> </div>', 
     controller: function ($scope) { 
     } 
    } 
}); 

myApp.controller('Ctrl1', ['$scope', function($scope) { 
    $scope.showdata = false ; 
    $scope.dataToShow = "I am looking to develop a dashboard in Angular JS and looking for inputs,I have a reference as shown in screen shot below ,I highlighted the buttons that expand and show the detail view,I want to develop something similar to that,what this button called in ANGULAR JS?any pointers or docs are very much appreciated .A list of all buttons or UI related things would be very helpful"; 

    $scope.showdata2 = false ; 
    $scope.dataToShow2 = "I am looking to develop a dashboard in Angular JS and looking for inputs,I have a reference as shown in screen shot below ,I highlighted the buttons that expand and show the detail view,I want to develop something similar to that,what this button called in ANGULAR JS?any pointers or docs are very much appreciated .A list of all buttons or UI related things would be very helpful"; 
}]); 

Et le code html:

 <dir.showhide dswitch="showdata" dshowmessage="hide" dshowmessagehover="Hide the data" dhidemessage="show" dhidemessagehover="Show the data" ></dir.showhide> 

    <div ng-hide="showdata"> 
     {{dataToShow}} 
    </div> 

Vous devez bien sûr le personnaliser