Skip to content

Instantly share code, notes, and snippets.

@codearachnid

codearachnid/app.js

Created July 1, 2015 20:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codearachnid/69c999117f9a3bf6b566 to your computer and use it in GitHub Desktop.
Save codearachnid/69c999117f9a3bf6b566 to your computer and use it in GitHub Desktop.
Download ZIP
Angular JS demo app
Raw
app.js
angular.module('SampleApp', ['ngRoute'])
.filter('filterByProperty', function(){
return function( items, propMatch ){
var filtered = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
for(var property in propMatch){
if (propMatch[property] == item[property]) {
filtered.push(item);
}
}
}
return filtered;
};
})
.service('sharedItems',function($filter){
var items= [];
return{
mock: function(){
items = [
{ "id": 1, "label":"item 1", "selected":false },
{ "id": 2, "label":"item 2", "selected":true },
{ "id": 3, "label":"item 3", "selected":false }
];
return items;
},
getById: function( id ){
console.log(items, id);
return $filter('filterByProperty')( items, {id:id} );
},
get: function(){
return items;
},
add: function( item ){
items.push(item);
},
set: function(value){
items=value;
}
};
})
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'ListController as items',
templateUrl:'list.html'
})
.when('/view/:itemId', {
controller:'ViewItemController as item',
templateUrl:'view.html'
})
.otherwise({
redirectTo:'/'
});
})
.controller('ListController', function( $scope,$location, $routeParams, sharedItems ){
console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
var items = this;
sharedItems.mock();
items.list = sharedItems.get();
items.additem = function() {
sharedItems.add({id:0,label:items.newItemLabel, selected:false});
items.list = sharedItems.get();
items.newItemLabel = '';
};
})
.controller('ViewItemController', function($scope, $location, $routeParams,sharedItems){
console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
//console.log( $routeParams.itemId, sharedItems.get(), sharedItems.getById( $routeParams.itemId ) );
var item = this; // sharedItems.getById( $routeParams.itemId );
item.detail = sharedItems.getById( $routeParams.itemId )[0];
console.log(item);
// item.id =
});
Raw
index.html
<html lang="en" ng-app="SampleApp">
<head>
<meta name="viewport" content="initial-scale=1" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>Sample App</h1>
<div ng-view></div>
</body>
</html>
Raw
list.html
<h2>List</h2>
<table>
<thead>
<th>ID</th>
<th>Label</th>
<th>Checked</th>
</thead>
<tbody ng-repeat=" item in items.list">
<tr>
<td>{{item.id}}</td>
<td><a ng-href="#/view/{{item.id}}">{{item.label}}</a></td>
<td><input type="checkbox" ng-model="item.selected"></td>
</tr>
</tbody>
</table>
<form ng-submit="items.additem()">
<input type="text" ng-model="items.newItemLabel" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
Raw
view.html
<h2>View</h2>
<table>
<thead>
<th>ID</th>
<th>Label</th>
<th>Checked</th>
</thead>
<tbody>
<tr>
<td>{{item.detail.id}}</td>
<td><a ng-href="#/view/{{item.detail.id}}">{{item.detail.label}}</a></td>
<td><input type="checkbox" ng-model="item.detail.selected"></td>
</tr>
</tbody>
</table>
<a href="#/">Back</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment