actions_cell_template.html

12/10/2014 - 2:58 PM

actions_cell_template.html

angular.module('Scrap', ['ui.router', 'ui.grid', 'ngTouch'])

.config(function($stateProvider){
	$stateProvider
		.state('peddlers', {
			url:'/peddlers',
			templateUrl:'app/peddlers/peddlers.tmpl.html',
			controller:'PeddlersCtrl',
/*			children:[
	          {
	        	  name:'business',
	        	  templateUrl:'app/peddlers/businessPeddlers.tmpl.html',
	        	  controller:'BusinessPeddlersCtrl'
	          }
          ]*/
		})
		
		.state('businessPeddlers', {
			url:'/peddlers/business',
			templateUrl:'app/peddlers/businessPeddlers.tmpl.html',
			controller:'BusinessPeddlersCtrl'
		})
		
		.state('businessPeddlersFormulas', {
			url:'/peddlers/business/formulas',
			templateUrl:'app/peddlers/businessPeddlers/formulas.tmpl.html',
			controller:'BusinessPeddlerFormulasCtrl'
		})
})

.controller('PeddlersCtrl', ['$http', '$scope', function($http, $scope){
	$scope.pageTitle = 'Peddlers';
	
}])

.controller('BusinessPeddlersCtrl', ['$http','$scope', 'uiGridConstants', function($http, $scope, uiGridConstants){
	
	$scope.pageTitle = 'Business Peddlers';
	
	$scope.businessPeddlersGrid = {
		enableRowSelection:true,
		enableSelectAll:true,
		enableSorting: true,
		enableFiltering: true,
		rowHeight:40,
		columnDefs:[
		            
            // ID column
			{ field: 'id', name: 'id', visible:false },
			
			// Name column
			{ 
				field: 'name', 
				name: 'Name',
				sort:{
					direction:uiGridConstants.ASC,
					priority:0
				},
				filter:{
					condition: uiGridConstants.CONTAINS
				},
				width:'30%'
			},
			
			// Location column
			{ name: 'Location', field: 'address.city-and-state', width:'20%'},
			
			// Address column
			{ name: 'Address', field: 'address.street', visible:false},
			
			// City column
			{ name: 'City', field: 'address.city', visible:false },
			
			// State column
			{ name: 'State', field: 'address.state', visible:false },
			
			// Zip code column
			{ name: 'Zip', field: 'address.zip', visible:false },
			
			// Actions column
			{ 
				name: 'Actions', 
				width:'10%', 
				enableSorting:false,
				enableFiltering:false,
				cellTemplate:'app/partials/business-peddlers/grid/actions_cell_template.html'
			}
		],
		rowTemplate: 'app/partials/business-peddlers/grid/row_template.html',
		onRegisterApi: function(gridApi){
			$scope.grid1Api = gridApi;
		},
		cellTemplate: 'app/partials/business-peddlers/grid/cell_template.html'
	};
	

	$http.get('PHP/BUSINESS_PEDDLERS.php').success(function(data){
		$scope.businessPeddlersGrid.data = data;
	});
	
	$scope.viewPricingFormulas = function(){
		console.log('test');
	}
	
}])

row_template.html

<div ng-click="getExternalScopes().viewPricingFormulas()" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell>

</div>

app.php

<?php
require_once 'PHP/checkCredentials.php';

$pageTitle = 'Business Peddlers';
?>
<!DOCTYPE html>
<html lang="en" ng-app="Scrap">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Sabel Steel</title>
        
        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        
        <!-- Bootstrap -->
        <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
        
        <!-- Angular UI Grid -->
        <link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        
    	<style type="text/css">
    		.ng-cloak {
    			opacity:0;
    		}
    	</style>
    </head>
    <body class="ng-cloak">
<?php include 'PHP/views/layouts/twbs-menu.phtml';?>
        <div class="container" ng-controller="BusinessPeddlersCtrl" ui-view>

        </div>
        
        <script type="text/javascript" src="bower_components/jquery/dist/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-touch/angular-touch.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-ui-grid/ui-grid.min.js"></script>
        
        <script type="text/javascript" src="app/common/models/peddlers-model.js"></script>
        <script type="text/javascript" src="app/peddlers/peddlers.js"></script>
        <script type="text/javascript" src="app/scrap-app.js"></script>
    </body>
</html>

actions_cell_template.html

<div class="ngCellText" ng-class="col.colIndex()" style="padding-top:5px; padding-left:5px;">
    <span ng-cell-text>
        {{console.log(row)}}
        {{row.getProperty(col.id)}}
    
        <button type="button" class="btn btn-sm btn-default" title="Edit peddler">
            <span class="glyphicon glyphicon-edit"></span>
        </button>
        <button type="button" class="btn btn-sm btn-default" title="Pricing forumulas" ng-click="viewPricingFormulas()">
            <span class="glyphicon glyphicon-usd"></span>
        </button>
    </span>
</div>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

actions_cell_template.html