https://github.com/binocarlos/ng-toptrump

Angular directive that renders a top-trump card for an objects data
https://github.com/binocarlos/ng-toptrump

Last synced: 11 days ago
JSON representation

Angular directive that renders a top-trump card for an objects data

• Host: GitHub
• URL: https://github.com/binocarlos/ng-toptrump
• Owner: binocarlos
• License: mit
• Created: 2014-02-24T21:59:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-02-25T00:34:01.000Z (over 10 years ago)
• Last Synced: 2024-04-14T14:36:44.043Z (7 months ago)
• Language: JavaScript
• Size: 133 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
ng-toptrump

===========

Angular directive that renders a top-trump card for an objects data

## installation

```

$ component install binocarlos/ng-toptrump

```

## usage

```js

angular

  .module('MyApp', [

  	require('ng-toptrump')

  ])

  .controller('MyCtrl', function($scope){

  	// the fields to display for each object

  	$scope.toptrump_fields = [{

  		// the title for the field

  		title:'Horsepower',

  		// the name of the field to extract the value

  		value:'horsepower'

  	},{

	  	title:'Weight',

	  	value:'weight'

	  },{

	  	title:'Power/Weight Ratio',

	  	// the value can also be a function to extract the value dynamically

	  	value:function(obj){

	  		// return p/w ratio to 2 decimal places

	  		return Math.round((obj.horsepower / obj.weight) * 100) / 100;

	  	}

	  }]

  	// the data to display

  	$scope.cars = [{

  		name:'Golf GTI',

  		image:'img/golf.jpg',

  		horsepower:240,

  		weight:780,

  		cylinders:4

  	},{

  		name:'Veyron',

  		image:'img/veyron.jpg',

  		horsepower:1001,

  		weight:1800,

  		cylinders:16

  	}]

  	

	})

```

```html



	


		

      
{{ car.name }}

      


    

	




```


## toptrump directive

this directive takes the following scope:

 * data:'=' - the object to render in the card

 * fields:'=' - the array of fields to display

the content in the directive is transcluded onto the top-trump card

## license

MIT