This is an project based on an example for an german article.
May you want to add or remove cubes dynamically like this:
angular.module("cubeApp")
.controller("CubeListCtrl", function ($scope) {
$scope.cubes = [];
$scope.addCube = function (xValue, yValue, zValue, tagValue) {
$scope.cubes.push({x: xValue, y: yValue, z: zValue, tag: tagValue});
}
$scope.removeCube = function (index) {
$scope.cubes.splice(index, 1);
}
});<h1>Cubes</h1>
<header ng-init="x=0;y=0;z=0">
<h2>Add new Cube</h2>
<input type="range" ng-model="x" min="0" max="360" step="1"/>
<input type="range" ng-model="y" min="0" max="360" step="1"/>
<input type="range" ng-model="z" min="0" max="360" step="1"/>
<input type="text" ng-model="tag" placeholder="Tags (comma-separated)"/>
<button class="addCube" ng-click="addCube(x,y,z,tag)">add Cube</button>
</header>
<section>
<h2>Cube List ({{cubes.length}})</h2>
<ul>
<li ng-repeat="cube in cubes">
<cube init-x="{{cube.x}}" init-y="{{cube.y}}" init-z="{{cube.z}}" tag="{{cube.tag}}"></cube>
<button class="removeCube" ng-click="removeCube($index)">remove this cube</button>
<a ng-href="#/{{cube.tag}}" target="_blank">Open {{cube.tag}} in a new window</a>
</li>
</ul>
</section>You'll need an API Key.
angular.module("angularjsde.cube")
.config(function (flickrProvider) {
flickrProvider.apiKey("4e0e99bf242015aee01bffea1efff314");
});